dom事件流是什么,如何阻止事件捕获?

什么是dom事件流

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。

dom事件流的三个阶段

w3c规范规定有三个阶段:捕获阶段->目标阶段->冒泡阶段
但是js只能在捕获/冒泡中的一个阶段处理程序。

冒泡阶段处理程序

1)dom0级事件: on+事件名
2)IE8以及以下:attachEvent
3) dom2级事件:addEventListener, 第三个参数为false(默认false)

捕获阶段处理程序

1)dom2级事件:addEventListener, 第三个参数为true(默认false)

如何阻止事件捕获/冒泡

e.stopPropagation() 既可以阻止冒泡也可以阻止捕获
IE低版本:e.cancelBubble()

e.storpImmediatePropagation() 既可以阻止冒泡也可以阻止捕获

区别:storpImmediatePropagation() 会阻止该元素的其他事件,而stopPropagation不影响该元素的其他事件。

0级,2级事件什么意思

代表dom标准迭代版本,类比es5,es6

目标阶段

目标阶段,事件发生的顺序,只和书写顺序有关;storpImmediatePropagation会阻止目标阶段的其他事件发生;也会阻止事件继续传播(冒泡/捕获)

事件流的根节点?

window
捕获阶段的节点顺序: window->document->html->body->自定义元素节点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值