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>