JavaScript - DOM -事件

3 事件

3.1 事件监听

① 给元素监听事件的三种方式

第一种： 把事件作为HTML标签的属性

<button onclick="code..."></button>

第二种： 把事件作为元素对象的方法

元素对象.onclick = function() {
  	code ...  
};

第三种：使用 addEventListener 方法

元素对象.addEventListener('click', function() {
   	code ... 
});

addEventListener 方式具有如下特点：

1. 可以给同一个元素的同一个事件绑定多个回调函数，触发事件多个回调函数会按照监听顺序执行
2. 该方法的第三个参数可以设置事件在捕获阶段还是冒泡阶段触发

② 解除事件的监听

如果是第一种方式和第二种方式监听的事件：

元素对象.on事件名 = null;

如果是第三种方式监听的事件：

元素对象.removeEventListener('事件名', 函数名)

3.2 事件流

一个完整的事件触发流程会经历三个阶段：

捕获阶段： 从 window 到 document 到 html 一直到目标元素。（目标元素： 具体的发生了事件动作且不可再分的元素）

目标阶段： 找到了目标与元素，标记着捕获阶段的结束，冒泡阶段的开始。

冒泡阶段： 从目标元素开始层层向上冒泡，冒到 body、html、document、window。

事件的回调函数在哪个阶段被执行？

事件的回调函数在冒泡阶段被执行，我们会说事件默认在冒泡阶段触发。

如何设置事件在哪个阶段触发？

addEventListener 第三个参数设置为 true 表示事件在捕获阶段触发，false 表示在冒泡阶段触发，默认值 false。

如果是第一种和第二种方式监听的事件，在冒泡阶段触发且无法修改。

3.3 事件回调函数中 this 的指向

1. 使用第二种方式和第三种监听事件，事件回调函数中 this 的值是触发事件的元素。

2. 使用第一种方式监听事件，属性值里面可以直接使用 this ，值是该元素

   <button onclick="console.log(this)">