javascript事件机制详解 --- 绑定事件监听器

javascript

事件是用户和页面进行交互的桥梁，当用户在页面中操作了某块区域，触发一个事件，web浏览器会通知应用程序发生了什么事件。如果开发人员关心这个事件，可以给事件添加一个侦听器（实际上就是一个函数），当事件发生时执行函数做相应的处理。

比如当我们打开某一个网页的时候，浏览器加载完这个网页的所有资源后，就会触发一个load 事件；当点击页面中的某一个“地方”，浏览器就会在那个“地方”触发一个 click 事件，某个“地方”，你可以认为就是点击了某个元素。

我们通过监听事件，在交互产生的瞬间，可以实现各种功能需求，比如，点击改变一个元素的颜色或者动态向页面添加某个元素。

总之，可以监听一个事件的发生，写上各种功能，等待着用户的操作，给他一个意想不到的惊喜，所以学习事件是非常有必要的。

监听事件

发生的特定事件浏览器已经定义好了，比如点击事件click,鼠标移入事件mouseover，鼠标移出事件mouseout，等等。当然也可以自定义事件，这是后话。根据用户的操作浏览器会触发对应的事件，我们要在事件触发时完成某些功能，那么就需要监听这个事件。监听事件的方式主要有以下几种：

HTML标签行间属性

HTML 标签里面直接填写事件有关属性，属性值为 JavaScript 代码，即可在触发该事件的时候，执行属性值的内容。

例如：

<button onclick="alert('点击这个按钮');">点击这个按钮</button>

行间属性写上onclick，表示当点击这个元素时，会触发元素的click事件，进而执行属性值中的 JavaScript 代码，弹出一个弹框。

当然你也可以执行一个代码块，需要封装成一个函数，函数要写成全局的，例如：

<button onclick="clickHandle()">点击这个按钮</button>

函数写在全局

<script>
    function clickHandle () {
        alert('点击这个按钮');
        alert('点击这个按钮');
        alert('点击这个按钮');
        alert('点击这个按钮');
    }
</script>

以上这样的方式，有一个缺点，就是JavaScript 代码与 HTML 代码耦合在了一起，不便于维护和开发。所以不推荐这种写法，尽量避免。

DOM 属性绑定

这种属于DOM1级事件处理程序的规范，是在JavaScript代码中 获取元素，给这个元素上与事件相关的属性指定一个事件处理函数。这种方式比较简洁，而且使JavaScript 代码与 HTML 代码分离：

node.onclick = function(event){
    alert('点击这个按钮');
};

当点击元素时候，浏览器会在元素上找与触发这个事件相关的属性，如果值是一个函数，则执行这个函数；如果值是一个null，则没有反应。默认为null。这里要注意，无论是否添加了事件处理函数，点击一个元素都会触发click事件，有没有反应决于是否添加了事件处理函数。很多人误以为不添加事件处理函数，就没有触发事件，实际上点击都会触发事件。

以上绑定处理函数的方式在初学者刚入门时经常使用，一个人开发并且写的例子比较简单，这种方式并不会暴露太多的弱点。当遇到团队协作，多个人都要给同一个元素的同一个事件绑定事件处理函数时，这种方式会出现后面绑定的覆盖前面的问题。

例如：

node.onclick = function () {
    alert('完成需求1')
}
node.onclick = function () {
    alert('完成需求2')
}

点击按钮后，只会执行第二个事件处理函数内的代码。因为后面的赋值会把前一个赋值覆盖掉。所以在团队协作中应避免使用这种绑定方式。

虽然也可以用一些方法实现多个绑定，但都不够灵活，推荐下面的标准事件监听函数。

使用事件监听函数

获取元素后，可以调用元素上addEventListener方法来绑定事件处理函数，从名字上就可以看的出来时添加事件监听器。

事件触发时执行的函数称之为事件处理函数或者事件监听器。

语法如下：

node.addEventListener(<event-name>, <listener>[, <use-capture>]);

参数说明：
- 监听的事件类型，不加on，例如。click、mouseove、mouseout
- 事件监听器，事件触发时执行的函数
- 可选。是否捕获，true，捕获阶段触发；false，冒泡阶段触发。

第三个参数具体是做什么的，下一节详细讲解

通过上面的addEventListener，就可以给同一个元素的同一个事件绑定多个事件处理函数：

node.addEventListener('click',function () {
    alert('完成需求1')
})
node.addEventListener('click',function () {
    alert('完成需求2')
})

点击元素后两个函数都能够被执行。