【原生javascript项目】Event Capture 25

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第25天的“语音合成”项目。Have fun with the website! ♪(^∇^*)

源代码：https://github.com/janice143/JavaScript30Program/tree/master/25%20eventCapture/index.html

项目描述

本项目主要目的是理解事件的捕获、传播、冒泡、单次触发等机制。首先提供3个尺寸颜色不一的<div>元素，通过点击事件来理解上述内容。

项目重点

capture
once

项目过程

JS部分

冒泡

当点击某个div时，自该div起以及其外层的div也将监听到点击事件。

例如，点击第3个div（最内层的），控制台显示的结果是three,two,one。
1
2
3
4
5
const divs = document.querySelectorAll('div');
function textLog(){
console.log(this.classList.value);
}
divs.forEach(div=>div.addEventListener('click',textLog));
捕获

点击某个div时，从不具体的div元素到最具体的元素（被点击的元素）从上到下监听到点击事件。

例如，点击第3个div（最内层的），控制台显示的结果是one,two,three。
1
2
3
divs.forEach(div=>div.addEventListener('click',textLog,{
capture: true
}));

停止事件继续传递

在冒泡的基础上，加上e.stopPropagation();来设置不再继续传播

function textLog(e){
    console.log(this.classList.value);
    e.stopPropagation();
}
divs.forEach(div=>div.addEventListener('click',textLog,{
    capture: false
}));

Once：允许事件触发一次，之后相当于removeEventListener。

function textLog(e){
    console.log(this.classList.value);
}
divs.forEach(div=>div.addEventListener('click',textLog,{
    capture: false,
    once:true
}));

项目补充

事件冒泡

事件开始由最精确的元素触发，逐级向上传播到其他节点

事件捕获

事件由不太具体的节点传播到最具体的节点

参考博客

事件流

JS30的第25个项目圆满完成啦，感谢阅读，有问题联系我的邮箱[email protected].

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。