DOM事件

1. 执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

2. 注册事件(绑定事件)

2.1 注册事件概述

注册事件是指给元素添加事件。注册事件有两种方式，分别为传统方式和方法监听注册方式。

2.2 传统注册方式

// 1. <button onclick="alert('hello world')"></button>  // 2. <button></button> <script>     var btn = document.querySelector('button');     btn.onclick = function() {         alert('hello world'); } </script> 

• 利用on开头的事件
• 特点：注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数。

2.3 方法监听注册方式(推荐)

element.addEventListener(); 

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

2.3.1 addEventListener事件监听方式

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

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

对于参数：

• type：事件类型字符串（带引号），注意不要带on。eg.click、mouseover
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认为false。如果是true时，表示在事件捕获阶段调用事件处理程序；如果是false时，表示在事件冒泡阶段调用事件处理程序。对于什么是事件捕获与事件冒泡，可以了解DOM的事件流。

2.3.2 attachEvent事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback); 

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

对于参数：

• eventNameWithOn：事件类型字符串，注意要带on。eg.onclick、onmouseover
• callback：事件处理函数，当目标触发事件时，回调函数被调用

注：ie8及早期版本支持。

2.3.3 注册事件兼容性的解决

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

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

3. 删除事件(解绑事件)

3.1 传统事件方式

eventTarget.onclick = null; 

3.2 方法监听注册方式

// 1. eventTarget.removeEventListener(type, listener[, useCapture]);  // 2. eventTarget.detachEvent(eventNameWithOn, callback); 

注：如果要删除事件，在绑定事件时不能将listener和callback写成匿名函数，要写成function fn() {}的形式，在调用时不需要加小括号。

3.3 删除事件兼容性的解决

function removeEventListener(element, eventName, fn) {     // 判断当前浏览器是否支持removeEventListener方法     if (element.removeEventListener) {         element.removeEventListener(eventName, fn);     } else if (element.detachEvent) {         element.detachEvent('on' + eventName, fn);     } else {         element['on' + eventNAme] = null;     } }