25 Event Related 中文指南
优质
小牛编辑
127浏览
2023-12-01
挑战任务
初始文档index-start.html
提供了3个尺寸不一的<div>
元素,本次挑战是一次学习任务,主要了解学习DOM的事件机制,包括事件捕获,事件冒泡,单次触发等。
结果展示
相关知识
过程指南
1.如下设置时,当点击某个div
时,自该div
起以及其外层的div
也将监听到点击事件,且点击事件只触发一次,当once参数值为false时,点击事件可多次触发。
divs.forEach(div => div.addEventListener('click', logText, {
once: true,
capture: false
}));
2.将capture
参数设置为true
后,运行程序后点击内层div
可以看到,事件的触发顺序为由外向内,即在事件捕获阶段监听到事件。
one.addEventListener('click', logText1, {
capture: true
});
two.addEventListener('click', logText2, {
capture: true
});
three.addEventListener('click', logText3, {
capture: true
});
function logText1(e) {
console.log(this.classList.value);
// e.stopPropagation();
}
function logText2(e) {
console.log(this.classList.value);
e.stopPropagation();
}
function logText3(e) {
console.log(this.classList.value);
//e.stopPropagation();
}
3.在事件回调函数中调用e.stopPropagation()
方法后,即可看到在该处监听到事件后不再继续传递事件、
延伸知识
由于事件冒泡机制的存在,实际应用中常在父元素来监听众多同类子元素的点击事件,如在<ul>
元素上监听多个<li>
元素的点击事件,任何一个<li>
元素被点击后,父元素都会监听到点击事件,更常用的方法是jQuery中的事件委托机制,感兴趣的小伙伴可以自行了解。