事件处理程序

关键点事件处理程序对于复杂的逻辑，主要是用来改变状态变量，通过状态变量来触发逻辑。

HTML绑定事件处理程序

最古老的事件绑定方式，通过HTML标签的属性来绑定事件处理程序，兼容性很好。但是违背了HTML和javascript结构与行为分离的原则。但需要修改代码时，需要修改两处，尽量少使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .box1 {
          height: 100px;
          width: 100px;
          background-color: pink;
      }
      .box2 {
          height: 50px;
          width: 50px;
          background-color: red;
          position: relative;
          top: 0;
          left: 25px;
      }
  </style>
</head>
<body>
  <div class="box1" onclick="console.log('我是盒子1');">
      <span>盒子1</span>
      <div class="box2" onclick="console.log('我是盒子2');">
          <span>盒子2</span>
      </div>
  </div>
</body>
</html>

DOM0绑定事件处理程序

缺点同一个事件源没法绑定多个事件句柄，会被覆盖。

<body>
  <div class="box1">
      <span>盒子1</span>
      <div class="box2">
          <span>盒子2</span>
      </div>
  </div>
</body>
<script>
let box1 = document.getElementsByClassName('box1')[0];
box1.onclick = () => {console.log('我是盒子1')};    //开始支持javascript绑定元素的事件处理程序。
box1.onclick = () => {console.log('我才是盒子1')};    //当绑定同一事件时，后一个事件会被前一个事件覆盖。
box1.onclick = null;    //删除事件
</script>

DOM2绑定事件处理程序重要

addEventListener()

removeEventListener()

<script>
      let box1 = document.getElementsByClassName('box1')[0];
      box1.addEventListener('click', () => console.log('我是盒子1'), false);  
      let box2 = document.getElementsByClassName('box2')[0];
      box2.addEventListener('click', remove);     //默认值参数是false        
      box2.addEventListener('click', remove);     //绑定相同的函数只会执行一次。绑定多个函数需要不同的函数。
      /**
      *目的：移除事件removeEventListener()
      *参数：参数同addEventListener()一样
      *功能：将增加的事件移除
      *返回值：无
      *总结：参数是匿名函数、函数定义都不起作用的
      */
      box1.removeEventListener('click', () => console.log('我是盒子1'), false);   //handler是匿名函数没有作用
      console.log(box2.removeEventListener('click', remove))    //起作用。但是remove换成函数定义也没用。

      function remove() { console.log('我是盒子2') }
  </script>

IE事件处理程序了解

绑定事件处理程序的方法，只在IE浏览器可以使用。 ```javascript /* 目的：对比与DOM2Event的区别 */ var box1 = document.getElementById(‘dd’);

function remove1() { console.log(‘我是盒子1’) } box1.attachEvent(‘onclick’, remove1); //第一个参数是onclick，比DOM2Event多了个on box1.attachEvent(‘onclick’, function remove2() { console.log(‘我是盒子1的兄弟’)}); //同一元素也可以添加多个事件 box.detachEvent(‘onclick’, remove); //移除事件，方法和DOM2Event一样


---

<a name="LFMJD"></a>
# 深入理解HTML绑定事件处理程序
```html
 <div class="box1" onclick="console.log(textContent);">

元素节点下的onclick属性值，封装在onclick包装函数里。

onclick包装函数，具体的定义。with关键字将一个对象的引用作为作用域。

//with作用的就是扩展了函数内变量的作用域链
function onclick(enent){
 with(document){
   with(this){
     console.log(textContent);
 }
}
}

因为包装函数，使得事件处理函数可以方便的访问自己的属性。

为什么HTML和DOM0绑定事件只能绑定一个事件处理函数？

因为事件处理函数被添加到下节点的属性值中。因此添加多个事件处理函数会被覆盖。