js事件流:事件冒泡与事件捕获

1.所谓事件冒泡,就是事件开始执行时,由文档中嵌套层次最深的那个节点接收,然后再逐级向上传播到嵌套层次最深节点的父亲>父亲的父亲>…一直到最外层

具体演示

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div class="myLip">click</div>
</body>
</html>

当点击页面中的div元素,这个click事件会按照一个顺序来传播即:
1.<div>
2.<body>
3.<html>
4.document

简单说就是,这个click点击事件首先要在div元素上执行,然后click事件会沿着DOM向上传播,在这个过程中,每一级的节点都会发生这个click事件,知道传播到document对象.
这个click事件逐级向上传播同时在每个上级节点都会发生的过程就是事件冒泡

2.而事件捕获刚好与事件冒泡相反,嵌套层次相对不深的那节点应该先接收到事件,也就是在事件到达注册的元素之前就捕获到它,那么这个顺序就是:

1.document
2.<html>
3.<body>
4.<div>

在事件捕获这个过程中,document对象最先接收到click事件,然后沿着DOM树的顺序依次向下,一直到事件传播到实际注册click事件的元素,也就是div这个元素.

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值