3 事件
3.1 事件监听
① 给元素监听事件的三种方式
第一种: 把事件作为HTML标签的属性
<button onclick="code..."></button>
第二种: 把事件作为元素对象的方法
元素对象.onclick = function() {
code ...
};
第三种:使用 addEventListener 方法
元素对象.addEventListener('click', function() {
code ...
});
addEventListener 方式具有如下特点:
- 可以给同一个元素的同一个事件绑定多个回调函数,触发事件多个回调函数会按照监听顺序执行
- 该方法的第三个参数可以设置事件在捕获阶段还是冒泡阶段触发
② 解除事件的监听
如果是第一种方式和第二种方式监听的事件:
元素对象.on事件名 = null;
如果是第三种方式监听的事件:
元素对象.removeEventListener('事件名', 函数名)
3.2 事件流
一个完整的事件触发流程会经历三个阶段:
捕获阶段: 从 window 到 document 到 html 一直到目标元素。(目标元素: 具体的发生了事件动作且不可再分的元素)
目标阶段: 找到了目标与元素,标记着捕获阶段的结束,冒泡阶段的开始。
冒泡阶段: 从目标元素开始层层向上冒泡,冒到 body、html、document、window。
事件的回调函数在哪个阶段被执行?
事件的回调函数在冒泡阶段被执行,我们会说事件默认在冒泡阶段触发。
如何设置事件在哪个阶段触发?
addEventListener 第三个参数设置为 true 表示事件在捕获阶段触发,false 表示在冒泡阶段触发,默认值 false。
如果是第一种和第二种方式监听的事件,在冒泡阶段触发且无法修改。
3.3 事件回调函数中 this 的指向
-
使用第二种方式和第三种监听事件,事件回调函数中 this 的值是触发事件的元素。
-
使用第一种方式监听事件,属性值里面可以直接使用 this ,值是该元素
<button onclick="console.log(this)">