事件阶段
DOM2级事件规定的事件流包括三个阶段,分别是:事件捕获阶段,处于目标阶段和事件冒泡阶段.
- 事件冒泡
事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档)
<div id = "div">
<span id="span">
<a id="aTag">事件测试</a>
</span>
</div>
document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
alert("点击的是a标签");
}
function span(e) {
alert("点击的是span标签");
}
function div(e) {
alert("点击的是div标签");
}
1)先打印出:点击的是a标签
2) 再打印出:点击的是span标签
3) 最后打印出:点击的是div标签
- 事件捕获
事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播,也就是先document,然后逐级div标签 , span标签 , a标签.
改写上面的 js 代码:
document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);
第三个参数设置为 true 为捕获事件, 默认为 false 是冒泡事件
事件委托
事件委托可以避免对每个节点添加事件监听, 我们可以利用冒泡原理, 将事件绑定到父元素上.
以下需要对父元素做事件委托:
- 很多兄弟元素需要绑定同一个事件时
- 子元素需要动态插入或删除时
事件委托的原理
当我们进行事件委托时, 事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.
当我们有如下文档结构时:
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
当子元素的事件冒泡到父 ul 元素时,你可以检查事件对象的 target 属性,捕获真正被点击的节点元素的引用。下面是一段 JavaScript 代码,演示了事件委托的过程:
document.getElementById("parent-list").addEventListener('click', function (e) {
if (e.target && e.target.nodeName == 'LI') {
console.log(`List item,${e.target.id}, was clicked!`)
}
})
执行过程:
- 给父元素添加事件监听器
- 事件触发时, 检查事件来源
- 如果触发事件的是 li 元素, 执行对应代码, 否则不执行
版权属于:行川草庐 - 行川的网络日志
本文链接:https://www.xing-chuan.com/archives/34.html
本作品由行川采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可