2. 事件处理程序

事件处理程序

为了对事件作出响应，我们可以分配一个 处理程序（handler）—— 一个在事件发生时运行的函数。

处理程序是在发生用户行为（action）时运行 JavaScript 代码的一种方式。

有几种绑定事件处理程序的方式：

1. 行内绑定

<p onclick="alert('hi')">
    hello
</p>
<p onclick="foo()">
    hello
</p>
<script>
    // 标签中不适合编写大量代码，因此我们最好创建一个 JavaScript 函数，然后在事件中调用这个函数。
    function foo(){
        console.log('hi')
    }
</script>

在鼠标点击时，onclick 中的代码就会运行。

2. 属性绑定

ele.onclick：

<p>
    click me!
</p>
<script>
    var pEl = document.getElementsByTagName('p')[0];
    pEl.onclick = function() {
        alert('Thank you');
    };
</script>

因为每一个dom只有一个 onclick 属性，所以我们无法分配更多事件处理程序。也就是无法同时绑定多个事件，通过这种方式添加多次同一个类型的事件，只执行最后添加的事件。

要移除一个处理程序 —— 赋值 elem.onclick = null。

3. addEventListener()方法注册事件处理程序

之前分配处理程序的方式的根本问题是 —— 我们不能为一个事件分配多个处理程序。

例如，在我们点击了一个按钮时，我们代码中的一部分想要高亮显示这个按钮，另一部分则想要显示一条消息。

我们想为此事件分配两个处理程序。但是，只有一个会生效。

ele.onclick = function() { alert(1); }
// ...
ele.onclick = function() { alert(2); } // 替换了前一个处理程序

Web 标准的开发者很早就了解到了这一点，并提出了一种使用 addEventListener 和 removeEventListener 来管理处理程序的替代方法。它们没有这样的问题。

• 它允许给一个事件注册多个 listener。

• 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。

• 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。

3.1 添加事件处理程序

语法 :

element.addEventListener(event, handler[, options]);

event: 事件名，例如："click"。

handler: 处理程序。

options: 具有以下属性的附加可选对象：

capture：事件处理的阶段(捕获/冒泡)

3.2 移除事件处理程序

要移除处理程序，可以使用 removeEventListener：

语法 :

element.removeEventListener(event, handler[, options]);

//要移除处理程序，我们需要传入与分配的函数完全相同的函数。
//参数信息必须一一对应

// 以下方式不起作用：

elem.addEventListener( "click" , () => alert('Thanks!'));
// ....
elem.removeEventListener( "click", () => alert('Thanks!'));

下面是正确方法：

function handler() {
  alert( 'Thanks!' );
}

input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

3.3 IE8 以下兼容问题

• target.attachEvent(type, listener);
• target.detachEvent(type,listener);

/**
 * 兼容IE8和标准浏览器
 * el 绑定元素
 * type 事件类型,IE8要加on
 * func 执行方法
 **/
function myAddEventListener(el, type, func) {
    // attachEvent 是IE 专有的方法
    if (el.attachEvent) {
        el.attachEvent("on" + type, func);
    } else {
        el.addEventListener(type, func);
    }
}