APIS-事件流

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 526 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

事件流和两个阶段说明

事件流指的是事件完整执行过程中的流动路径
说明:假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说:捕获阶段是从父到子冒泡阶段是从子到父
实际工作都是使用事件冒泡为主

阻止冒泡

问题:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求:若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提:阻止事件冒泡需要拿到事件对象

语法：

事件对象.stopPropagation()

注意:此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

document.addEventListener('click',function(){
alert('我是爷爷’)
})
fa.addEventListener('click',function(){
alert('我是爸爸")
})
son.addEventListener('click',function(e){
alert('我是儿子')
// 组织流动传播 事件对象.stopPropagation()
e.stopPropagation()
})

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转 语法:

e.preventDefault()

<form action="http://www.baidu.com">
<input type="submit" value="提交">
</form>
<script>
const form = document.querySelector('form')
form.addEventListener('click',function(e){
// 阻止表单默认提交行为
e.preventDefault()
})

解绑事件

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

// 绑定事件
btn.onclick =function(){
alert('点击了')
}
// 解绑事件
btn.onclick = null

addEventListener方式，必须使用:

removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])

如:

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

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

鼠标经过事件的区别

鼠标经过事件:

mouseover和 mouseout 会有冒泡效果
mouseenter 和mouseleave 没有冒泡效果(推荐)

两种注册事件的区别:

传统on注册(L0)

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用nul覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的

事件监听注册(L2)

语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑