DOM事件

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;
    }
}