API事件流

jl_3288

已于 2024-02-26 07:27:47 修改

阅读量236

点赞数 5

分类专栏： API 文章标签： javascript 开发语言 ecmascript

于 2024-02-07 11:45:24 首次发布

本文链接：https://blog.csdn.net/jl_3288/article/details/136067019

版权

API 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的事件流、捕获和冒泡机制，展示了如何阻止事件冒泡、阻止元素的默认行为，以及传统on事件和addEventListener的事件绑定和解绑方法及其区别。

摘要由CSDN通过智能技术生成

文章目录

事件流
- 事件捕获
- 事件冒泡
- 阻止冒泡
- 阻止元素默认行为
- 解绑事件
- 两种注册事件的区别

事件流

事件流指的是事件完整执行过程中的流动路径事件流的两个阶段
捕获阶段：从父到子
冒泡阶段：从子到父
实际工作都是使用事件冒泡为主

事件捕获

从DOM的根元素开始执行对应的事件（从外到里）
代码：DOM.addEvent(事件类型,事件处理函数,是否使用捕获机制)
说明：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用），若传入false代表冒泡阶段触发，默认就是false

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次触发
即一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的

阻止冒泡

语法：事件对象.stopPropagation()
也能阻止捕获

阻止元素默认行为

语法：e.preventDefault()
例如：

<body>
	<a href="http://www.baidu.com">百度一下</a>
	<script>
		const a = document.querySelector('a')
		a.addEventListener('click',function(e) {
			e.prevntDefault()//阻止打开链接
		})
	</script>
</body>

解绑事件

on事件方式，直接使用null覆盖偶就可以实现事件的解绑
语法：

btn.onclick = function() {
	alert('点击')
}
btn.onclick = null

addEventListener方式，必须使用：
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
例如：

function fn() {
	alert('点击')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)

注意：匿名函数无法被解绑

两种注册事件的区别

传统on注册（L0）
同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行
事件监听注册（L2）
语法：addEvent(事件类型,事件处理函数,是否使用捕获)
后面注册的事件不会覆盖前面注册的事件（同一个事件）
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑

jl_3288

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
API事件流

说明：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用），若传入false代表冒泡阶段触发，默认就是false。当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次触发。即一个元素触发事件后，会依次向上调用所有父级元素的。从DOM的根元素开始执行对应的事件（从外到里）指的是事件完整执行过程中的流动路径。实际工作都是使用事件冒泡为主。事件冒泡是默认存在的。
复制链接

扫一扫

专栏目录