DOM注册事件：传统注册和方法监听注册

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式。

传统注册方式

传统注册方式注重注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。利用 on 开头的事件onclick。

方法监听注册方式

方法监听注册方式是w3c 标准 推荐方式，addEventListener() 它是一个方法，IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替，方法监听同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。

addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：

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

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

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

attachEvent 事件监听方式

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

该方法接收两个参数：

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

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

注意：IE8 及早期版本支持

注册事件兼容性解决方案

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;
}
兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器。