关于前端:JavaScript的事件捕获和事件冒泡

35次阅读

共计 4020 个字符,预计需要花费 11 分钟才能阅读完成。

事件冒泡机制

让咱们先看一段代码

<!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 事件流的过程:

当一个事件产生时,先进入捕捉阶段,也就是从最外层开始,顺次向里流传事件,始终到触发事件的指标元素(上例中的 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);

测试一下,当点击内层蓝色局部时,外层 div 的 alertName 办法先响应了,而后是内层 div 的 alertName 办法,最初是外层 div 的 alertAgain 办法。也就是说,语句 parent.addEventListener("click", alertName, true); 注册的事件,被提前到捕捉阶段响应,即最外层的响应会先被执行。

留神了,IE8 之前是不反对 addEventListener 的,所以只能用 attachEvent 办法来增加事件绑定,代码如下:

    child = document.getElementById('child');
    parent = document.getElementById('parent');
    child.attachEvent("onclick", alertName);    // 留神,这里要写 onclick
    parent.attachEvent("onclick", alertName);

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 办法能够阻止事件的默认解决行为,比方在上例中,点链接时就不会关上百度页面。

正文完
 0