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这个元素.

猜你喜欢

转载自blog.csdn.net/weixin_44283589/article/details/114985254