1. 事件三要素

  • 事件源(目标元素):触发事件的元素
  • 事件类型(什么事件): 例如 click 点击事件
  • 事件处理程序(动态):事件触发后要执行的代码(函数形式),事件处理函数

2. 事件执行步骤

  • 获取事件
  • 注册事件(绑定事件)
  • 添加事件处理程序(函数赋值)
  1. <body>
  2. <div>点击触发</div>
  3. <script>
  4. // 执行事件步骤
  5. // 点击div 控制台输出 我被选中了
  6. // 1. 获取事件源
  7. var div = document.querySelector('div');
  8. // 2.绑定事件 注册事件
  9. // div.onclick
  10. // 3.添加事件处理程序
  11. div.onclick = function() {
  12. console.log('我被选中了');
  13. }
  14. </script>
  15. </body>

3. 常见鼠标事件

1550734506084.png

4.操作元素

改变元素内容

1550735016756.png

innerText改变元素内容

  1. <body>
  2. <button>显示当前系统时间</button>
  3. <div>某个时间</div>
  4. <p>1123</p>
  5. <script>
  6. // 当我们点击了按钮, div里面的文字会发生变化
  7. // 1. 获取元素
  8. var btn = document.querySelector('button');
  9. var div = document.querySelector('div');
  10. // 2.注册事件
  11. btn.onclick = function() {
  12. // div.innerText = '2019-6-6';
  13. div.innerHTML = getDate();
  14. }
  15. function getDate() {
  16. var date = new Date();
  17. // 我们写一个 2019年 5月 1日 星期三
  18. var year = date.getFullYear();
  19. var month = date.getMonth() + 1;
  20. var dates = date.getDate();
  21. var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  22. var day = date.getDay();
  23. return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
  24. }
  25. </script>
  26. </body>

innerText和innerHTML的区别

  • 获取内容时的区别:

    innerText会去除空格和换行,而innerHTML会保留空格和换行

  • 设置内容时的区别:

    innerText不会识别html,而innerHTML会识别

改变元素的属性

1550735556297.png

  1. //元素对象.属性名 获取属性的值
  2. var ser = document.querySelector('input')
  3. //元素对象.属性名 = 值 设置属性的值
  4. ser.style.color='#999'

表单操作

1550736039005.png
获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。

**

  1. <body>
  2. <button>按钮</button>
  3. <input type="text" value="输入内容">
  4. <script>
  5. // 1. 获取元素
  6. var btn = document.querySelector('button');
  7. var input = document.querySelector('input');
  8. // 2. 注册事件 处理程序
  9. btn.onclick = function() {
  10. // 表单里面的值 文字内容是通过 value 来修改的
  11. input.value = '被点击了';
  12. // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
  13. // btn.disabled = true;
  14. this.disabled = true;
  15. // this 指向的是事件函数的调用者 btn
  16. }
  17. </script>
  18. </body>