Day25 - Event Capture, Propagation, Bubbling and Once
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
第25天的训练是学习DOM的事件机制,主要包括事件捕获,事件冒泡,单次执行事件。
源代码
1 | <script> |
同时也看一下HTML的文档结构,对于事件机制的理解也很重要:
1 | <div class="one"> |
EventTarget.addEventListener('eventName',callback,option)
:元素的事件注册方法,接收三个参数,第一个参数为事件的名称(点击click
、双击dbclick
、改变change
等),第二个参数是该事件的回调函数,也称为监听器,第三个参数为事件注册的选项对象,通常会包含两个配置项(是否事件捕获capture
以及单次执行once
事件,它们两个的默认值都是false
)。- 当我们点击
class="three"
的div
的时候,我们也相当于同时点击了class="two"
和class="one"
。 e.stopPropagation();
是否停止冒泡,如果调用了这个方法,就不会触发父组建的方法。