事件冒泡

　　当一个事件发生时，当前 DOM 元素本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中。事件向上传递的过程便是事件冒泡。这是一个典型的责任链模型，由责任链上的节点依次对事件进行处理。当然，必要的时候我们也可以根据需要禁止事件的传播。

　　比如，当多个嵌套的 DOM 元素均监听同一事件时，如果我们不阻断事件的传播，事件会自下而上被依次处理：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body onclick='console.log("from body");'>
        <div onclick='console.log("from div");'>
            <button onclick='console.log("from button");'>点击我</button>
        </div>
    </body>
</html>

 

　　处理事件的顺序是 button---> div ---> body 。

　　与事件冒泡对应的是事件捕获，事件捕获的顺序与事件冒泡的顺序相反，由外层到内层依次对事件进行捕获：

　　事件的传播分为两个阶段，冒泡和捕获，可以在两个阶段分别定义事件监听器。onclick 与 attachEvent 只能得到冒泡阶段。

　　通过 addEventListener("click",function(){},冒泡或捕获)  方法添加事件监听时，第三个参数为 true，则是在捕获阶段触发该事件处理函数。第三个参数容缺或为 false 时，在冒泡阶段触发事件处理函数。

posted @ 2020-03-16 23:40  牛有肉  阅读(161)  评论(0)    收藏  举报