• 25 Event Related 中文指南
    • 挑战任务
    • 结果展示
    • 相关知识
    • 过程指南
    • 延伸知识

    25 Event Related 中文指南

    本篇作者:©大史快跑Dashrun——Chinasoft Frontend Developer

    简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 25 篇。完整指南在 GitHub,喜欢请 Star 哦♪(^∇^*)

    创建时间:2017-09-28
    最后更新:2017-09-28

    挑战任务

    初始文档index-start.html提供了3个尺寸不一的<div>元素,本次挑战是一次学习任务,主要了解学习DOM的事件机制,包括事件捕获,事件冒泡,单次触发等。

    结果展示

    结果展示

    相关知识

    addEventListener文档

    过程指南

    1.如下设置时,当点击某个div时,自该div起以及其外层的div也将监听到点击事件,且点击事件只触发一次,当once参数值为false时,点击事件可多次触发。

    1. divs.forEach(div => div.addEventListener('click', logText, {
    2. once: true,
    3. capture: false
    4. }));

    2.将capture参数设置为true后,运行程序后点击内层div可以看到,事件的触发顺序为由外向内,即在事件捕获阶段监听到事件。

    1. one.addEventListener('click', logText1, {
    2. capture: true
    3. });
    4. two.addEventListener('click', logText2, {
    5. capture: true
    6. });
    7. three.addEventListener('click', logText3, {
    8. capture: true
    9. });
    10. function logText1(e) {
    11. console.log(this.classList.value);
    12. // e.stopPropagation();
    13. }
    14. function logText2(e) {
    15. console.log(this.classList.value);
    16. e.stopPropagation();
    17. }
    18. function logText3(e) {
    19. console.log(this.classList.value);
    20. //e.stopPropagation();
    21. }

    3.在事件回调函数中调用e.stopPropagation()方法后,即可看到在该处监听到事件后不再继续传递事件、

    延伸知识

    由于事件冒泡机制的存在,实际应用中常在父元素来监听众多同类子元素的点击事件,如在<ul>元素上监听多个<li>元素的点击事件,任何一个<li>元素被点击后,父元素都会监听到点击事件,更常用的方法是jQuery中的事件委托机制,感兴趣的小伙伴可以自行了解。