DOM注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

1. 利用 on 开头的事件 onclick

2. <button οnclick=“alert('hi~')”></button>

3. btn.onclick = function() {}

4. 特点： 注册事件的唯一性

5. 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

1. w3c 标准 推荐方式

2. addEventListener() 它是一个方法

3. IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替

4. 特点：同一个元素同一个事件可以注册多个监听器

5. 按注册顺序依次执行

---

1.2 addEventListener 事件监听方式

 eventTarget.addEventListener(type, listener[, useCapture]) 

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

1. type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on

2. listener：事件处理函数，事件发生时，会调用该监听函数

3. useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

---

1.3 attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

1. eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on

2. callback： 事件处理函数，当目标触发事件时回调函数被调用

注意：IE8 及早期版本支持

1.4 注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
 } 

兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器