Day25 - Event Capture, Propagation, Bubbling and Once

本文出自：春哥个人博客：http://www.liyuechun.org
作者：©黎跃春-追时间的人
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 25 篇。完整中文版指南及视频教程在从零到壹全栈部落。

效果图

第25天的训练是学习DOM的事件机制，主要包括事件捕获，事件冒泡，单次执行事件。

源代码

addEventListener参考文档

 <script>let divs = document.querySelectorAll('div');let one = document.querySelector('.one');let two = document.querySelector('.two');let three = document.querySelector('.three');divs.forEach(div => div.addEventListener('click', logText, {once: true,capture: false}));// one.addEventListener('click', logText1, {//     // capture: true// });// two.addEventListener('click', logText2, {//     // capture: true// });// three.addEventListener('click', logText3, {//     capture: true// });function logText(e) {console.log(this.classList.value);// e.stopPropagation();}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();}</script>

同时也看一下HTML的文档结构，对于事件机制的理解也很重要：

<div class="one"><div class="two"><div class="three"></div></div>
</div>

EventTarget.addEventListener('eventName',callback,option)：元素的事件注册方法，接收三个参数，第一个参数为事件的名称（点击click、双击dbclick、改变change等），第二个参数是该事件的回调函数，也称为监听器，第三个参数为事件注册的选项对象，通常会包含两个配置项（是否事件捕获capture以及单次执行once事件，它们两个的默认值都是false）。
当我们点击class="three"的div的时候，我们也相当于同时点击了class="two"和class="one"。
e.stopPropagation();是否停止冒泡，如果调用了这个方法，就不会触发父组建的方法。

源码下载

Github Source Code

Day25 - Event Capture, Propagation, Bubbling and Once相关推荐

JS Event Propagation (bubbling and capture)
事件传播是双向的(bidirectional), 先从DOM树的根元素(window)到事件目标元素(event target), 接着从事件事件目标元素回到DOM树的根元素. 整体可以分为下面三个阶 ...
JS Event handler example - event capture and bubble
Created by Jerry Wang, last modified on Jun 06, 2015 source link: http://www.ido321.com/1570.html 这个 ...
JavaScript事件处理的例子：事件捕捉和冒泡 - event capture and bubble
Created by Jerry Wang, last modified on Jun 06, 2015 source link: http://www.ido321.com/1570.html 这个 ...
event.stopPropagation和event.preventDefault有什么区别？
他们似乎在做同样的事情--是现代的还是老的? 还是不同的浏览器支持它们? 当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在). (我也return false ,但是我感觉不适用于与no ...
WebKit DOM Event (一)
DOM Event 规范 DOM Event 主要定义了三类接口: EventTarget, 所有DOM节点和XMLHttpRequest 都实现EventTarget接口 class EventTa ...
Angular 4.x Events Bubbling
Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素来说是相同的 - (eventName)="expression" ...
Event.observe
Event.observe View source on GitHub → Event.observe(element, eventName, handler) → Element element ( ...
一份来自于全球的前端面试题清单，看看老外喜欢考哪些题（部分有答案）
方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国 ...
Cocos Creator游戏开发教程学习笔记
学完提问几个问题吧: position的锚点位置数值原点在哪里? 因为position是相对坐标,所以原点是父节点的锚点 .所以Canvas下面的直属节点原点就是世界坐标系的原点Canvas的锚点. ...

Day25 - Event Capture, Propagation, Bubbling and Once

效果图

源代码

源码下载

Day25 - Event Capture, Propagation, Bubbling and Once相关推荐

最新文章

热门文章