一篇文章掌握 JavaScript DOM 事件

本文采用更新的方式，由最简单的事件概念到对于 DOM 事件的全面理解。

第一：什么是事件

事件不是一个需要严格定义的技术名词。简单了解，事件就是文档或者浏览器窗口中发生的交互（或者动作）。比方点击或者拖动一个元素、文档加载完成、Ajax 中的 onreadystatechange 事件等。

事件发生并不会导致后续行为，只有在事件具备了对应的事件解决程序，才会在事件发生时产生后续的响应行为。就像「假如今天天气不错」和「假如今天天气不错，我们去打球」这两句话，前者只是事件发生，后者才是在事件发生时执行响应的行为。

第二：事件解决程序

有三种方式可以在一个 DOM 元素上增加事件解决程序。

1. 在 HTML 标签中设置事件同名属性

   <input type="button" onclick="alert('Hello world!')">

代码中 onclick 的值应该为可执行的 JavaScript 语句，假如是多条语句可以用分号隔开。

2. 设置元素事件解决程序属性（DOM0 级事件）
   window、document 和所有文档元素都有自己的事件解决程序属性，这些属性都是小写。将元素属性的值设置为一个函数，这个函数就是元素的事件解决程序。具体代码如下：

   let nav = document.querySelector('nav ');   nav.onclick = function() {     alert(this.nodeName); // 此处 this 引用当前元素，结果为 nav }

这种方法的缺点是只可设置一个解决程序。

3. 通过 addEventListener 函数增加事件解决程序（DOM2 级事件）

    element.addEventListener('click', function (event) {       alert(event.currentTarget.nodeName);  //输出当前元素的标签名 }, false);

这个函数有三个参数，第一个参数是事件类型，第二个参数是事件解决程序，第三个参数是设置事件触发的阶段。默认值为 false，表示事件在冒泡阶段触发。具体区别在讲解事件流时说明。

关于 DOM2 级事件还有一个方法是 removeEventListener，用于删除事件解决程序。
只有参数与 addEventListener 相同，removeEveneListener 才会发挥作用，也就是说假如第二个参数是一个匿名函数，事件删除不会成功。

注意：Internet Explorer 9 之前并不支持这个方法， 有一个相似的方法 element.attachEvent。

第三：事件类型

事件可以分为 UI 事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件以及 HTML5 事件。<audio> 和 <video> 的事件属于 HTML5 事件。

第四：事件流是什么

首先来答复事件流是什么。事件流就是从页面中接收事件的顺序，或者者事件在页面上传递的顺序。

这个概念可以这么了解。当你单击了一个元素，这个元素触发单击事件。有时这个元素外面有一层父元素，父元素之外或者许还有一层父元素。那么子元素触发单击事件，父元素会怎样样呢？

浏览器的开发团队规定，触发事件元素的父元素也触发了事件，父元素的父元素也触发了事件。此时就产生了一个顺序问题，是先触发父元素事件再触发子元素事件，还是先触发子元素事件再触发父元素事件。这两种触发方式都有自己实现，先父后子称为事件捕获，先子后父称为事件冒泡。

DOM2 级事件流分为三个阶段，事件捕获阶段、目标阶段和事件冒泡阶段。也就是 事件先从 window 对象一级一级传到目标元素，在从目标元素传到 window 对象。就像下图所示：

事件流

addEventListener 函数的第三个参数，用来设置事件的触发是在事件捕获阶段还是在事件冒泡阶段。

具体验证代码如下：

        <table>    <tbody>        <tr>            <td></td>            <td></td>        </tr>        <tr>            <td></td>            <td></td>        </tr>    </tbody></table><script>let td = document.querySelector('td')window.addEventListener("click", function () {    alert("捕获 window");}, true);document.addEventListener("click", function () {    alert("捕获 document");}, true);document.documentElement.addEventListener("click", function () {    alert("捕获 html");}, true);document.body.addEventListener("click", function () {    alert("捕获 body");}, true);td.addEventListener("click", function (event) {    alert(event.target.nodeName);}, true);</script>

将 addEventListener 的第三个参数改为 false 验证事件冒泡。

第五：event 参数怎样用？如何自己设置事件

1. addEventListener 的事件解决程序有一个参数，一般将参数命名为 event，就像上方代码那样。

event 常用属性，下面我依次列举。

• event.stopPropagation()
  这是一个函数，调用后阻止事件的冒泡传递。也就是说，假如子元素的解决程序内调用了该方法，父元素不会触发该事件。
• event.preventDefault()
  阻止默认事件，比方在 <a>的解决函数中调用这个方法，就会阻止链接的默认跳转。
• event.currentTarget： 事件解决程序当前正在解决事件的那个元素，即当前事件解决函数绑定的元素。
  event.target：事件的目标，比方你点击或者触摸的元素。

2. 自己设置事件以具体代码为例：

         let eve = new Event('cT')         //自己设置事件一般与其余事件结合使用 document.body.addEventListener('cT',function(event) {     console.log('666') },false) setTimeout(function() {     document.body.dispatchEvent(eve) //触发自己设置事件 },1000)

假如文章对你有帮助，请点个赞支持一下。

Octavio Fossatti 2015-10-05 08-34-58 .jpg