JavaScript的事件捕获和事件冒泡

发布于 2021-5-7 18:32
浏览
1收藏

事件冒泡机制


让我们先看一段代码

<!DOCTYPE html>
<html>
<head>
    <title>Event Capture and Propagation</title>
</head>
<body>
    <div id="parent" style="width:120px; height:120px; background:#090; padding:60px">
        <div id="child" style="width:120px; height:120px; background:#0CC"></div>
    </div>
    <script type="text/javascript">
    function alertName(e) {
        alert(this.id);
    }

    document.getElementById('child').onclick = alertName;
    document.getElementById('parent').onclick = alertName;
    </script>
</body>
</html>

我们在外层div和内层div的onclick事件上都绑定了alertName(e)方法,打开浏览器试试。当我们点击外层绿色部分,外层div的事件响应了;让我们点击内层蓝色部分,内层div的事件先响应,然后外层div的事件再响应。

 

所以我们很容易得出结论,浏览器是先找到当前被点击的元素,如果该元素上注册了onclick事件则响应;然后浏览器继续寻找被点击元素的父元素,如果其也注册了onclick事件,则该事件也响应,然后再继续向上层寻找。这就是JS的事件冒泡机制。我们换个浏览器试试,目前版本的Chrome, Safari, Firefox和IE都是同样的结果。

 

事件处理模型


其实事件处理有两种模型。一种叫冒泡型,也就是上面我们看到的例子,顺序是从里到外”div” -> “body” -> “html” -> “document” -> “window”。还有一种叫捕获型,顺序正好颠倒。IE是支持冒泡型,据说历史上的Netscape是支持捕获型。那我们主流的W3C标准呢?答案是都支持,默认是冒泡型。这要怎么理解?我们先来看下W3C DOM事件流的过程:

JavaScript的事件捕获和事件冒泡-开源基础软件社区

当一个事件发生时,先进入捕获阶段,也就是从最外层开始,依次向里传播事件,一直到触发事件的目标元素(上例中的div child)。随后再进入冒泡阶段,从触发事件的元素开始,依次向外传播,直到最外层元素。那么为什么我们在前面的例子中看不到事件捕获的阶段呢?这里我们要先说另外一个概念。

 

添加事件绑定


上面的例子是将onclick事件属性设置为alertName(e)方法,这样的事件绑定方法一般不推荐,因为会覆盖之前所绑定的其他函数。我们建议采用addEventListener方法。我们将上例中绑定事件的代码做如下改动:

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.addEventListener("click", alertName);    // 注意,这里要写click,不是onclick
    parent.addEventListener("click", alertName);

 

addEventListener方法的第一个参数是事件名称,第二个参数是响应函数。打开浏览器点击下,是不是跟之前用onclick绑定的效果一样啊?那这么做的好处是什么呢?我们试试在上段代码的后面添加下面的代码:

    function alertAgain(e) {
        alert(this.id + ", again")
    }
    child.addEventListener("click", alertAgain);

 

再次点击内层蓝色div部分,你会看到该元素上绑定的两个点击事件方法都响应了,响应的顺序同代码中绑定的顺序一致。所以,使用addEventListener就不会覆盖掉之前已绑定的方法。

 

捕获阶段事件响应


介绍完addEventListener方法的作用,就要说下,这个方法其实有第三个参数的。参数名称叫useCapture,类型是布尔型。从名称里估计大家就猜到了,如果将它设为true的话,事件处理将会是捕获型的,也就是事件将会在捕获阶段响应,而不是冒泡阶段响应。我们将上面例子中addEventListener部分改动一下:

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.addEventListener("click", alertName);    // 注意,这里要写click,不是onclick
    parent.addEventListener("click", alertName, true);
    parent.addEventListener("click", alertAgain);

 

attachEvent方法没有第三个参数,所以说老版本的IE只支持事件冒泡,而不支持事件捕获。即使是在后续的IE版本中可以调用addEventListener方法,但大家也要注意,里面的”this指针”的指向跟W3C标准浏览器不一样。父元素在冒泡过程中响应时,”this指针”将指向window对象,所以上面的例子在IE高版本中测试时,第二个”alert”内容会是undefined。哎,万恶的IE!

 

阻止事件传播


有时候,我们希望事件被响应一次就停了,不希望子元素(在捕获过程中)或者父元素(在冒泡过程中),再次响应同样的事件,这个要怎么做呢?我们还是看例子。这次我们要改动的是alertName方法。

    function alertName(e) {
        alert(this.id);
        stopBubble(e);
    }

    function stopBubble(e) {
        if (e && e.stopPropagation)
            e.stopPropagation();    // W3C
        else
            window.event.cancelBubble = true;  // Old IE
    }

event对象上的stopPropagation方法可以阻止事件沿父节点(冒泡阶段)或子节点(捕获阶段)进一步传播。所以经过上述改动后,我们发现点击事件只会被响应一次。注意了,如果当前处理响应的节点上还有其他事件响应函数,那还是会被调用的,stopPropagation只是阻止事件往别的节点传播。万恶的IE在以前的版本中(应该是IE8往上)不支持stopPropagation,所以要用window.event.cancelBubble=true来阻止事件传播。

 

总结下,我们介绍了事件处理模型中的事件捕获和事件冒泡。在W3C标准中,事件响应时先进入捕获阶段从最外层元素向内传播,一直到触发事件的目标元素;然后进入冒泡阶段从目标元素向外传播,一直到最外层元素。我们可以通过addEventListener方法的第三个参数来决定事件是由捕获阶段处理还是冒泡阶段处理。而事件对象event上的stopPropagation方法可以阻止事件再次传播。说到这里,事件处理模型到底有什么意义呢?个人认为有两个好处:

 

  1. 首先如果父元素里有很多子元素都要绑定同一个事件,而且事件的处理方法很类似,那我们完全可以只在父元素中绑定该事件作统一处理,这样代码会简洁很多。
  2. 事件发生时,当前元素及其传播路径上的元素都要对该事件作不同的处理,那我们可以在各自元素上绑定对于该事件各自的处理方式。这要,当事件发生时,每个元素都只管处理自己的响应函数,有点像责任链模式。


最后,要说下两个注意点:

 

  1. blur, focus, load, unload事件是不传播的。
  2. stopPropagation不能阻止对象的默认行为传播,比如”submit”类型按钮的提交。如果你还是想做到,那就要阻止事件的默认行为。方法如下:
        <a href="http://www.baidu.com/" id="link">Baidu</a>
        <script type="text/javascript">
        function stopDefault(e) {
            if (e && e.preventDefault)
                e.preventDefault();    // W3C
            else
                window.event.returnValue = false;  // Old IE
        }
    
        link = document.getElementById('link');
        link.onclick = function(e) {
           alert("Prevent open the link of Baidu");
           stopDefault(e);
        }
        </script>
    ​

event对象上的preventDefault方法可以阻止事件的默认处理行为,比如在上例中,点链接时就不会打开百度页面。

 

 

 

 

 

 

已于2021-5-7 18:32:01修改
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐