JavaScript中的默认事件顺序是什么?自上而下或自下而上

可能的重复：
什么是事件冒泡和捕获

我刚刚了解到，在JS中，我们有两种事件类型：捕获和泡泡。气泡可用于避免将eventListener连接到所有儿童的需要；而是仅将侦听器附加到父母身上，然后检查目标。听起来很酷。我尝试了这个示例：

<div id="parent-list">
    <span>span1</span>
    <span class='target'>span2</span>
    <span>span3</span>
    <span>span4</span>
</div>
<script type="text/javascript">
document.getElementById('parent-list').addEventListener('click',function(e){
    if( e.target && e.target.nodeName=='SPAN' ){
        var classes = e.target.className.split(' ');
        for(var i=0; i<classes.length; ++i){
            if( classes[i]=='target' ){
                alert('Bingo! you hit the target.');
            }
        }
    }
});
</script>

，但我没有附上任何听众的孩子跨度。然而，他们上的事件在冒泡！那么在JS中冒泡默认事件订单吗？然后在哪种情况下使用捕获（自上而下）？

想象您的HTML看起来像这样：

<div id="grandparent">
    <div id="parent">
        <button id="target"></button>
    </div>
</div>

和JS，看起来像这样：

function sayGrandpa (evt) { console.log("Grandpa"); }
function sayClicked (evt) { console.log("Clicked"); }
var grandparent = document.getElementById("grandparent"),
    target = document.getElementById("target");
grandparent.addEventListener("click", sayGrandpa, false);
target.addEventListener("click", sayClicked, false);

冒泡与捕获实际上与您的假设没有任何关系是在孩子身上触发的。

不同之处在于，冒泡的是，事件链开始于目标，并在父母的链条上恢复了正常的工作，例如在零零下引爆的炸弹，并向向外发送冲击波。

捕获从window（或<html>）开始，然后转到目标元素。

因此，当您使用起泡（更像是波纹）时，首先发生元素上的任何功能，任何委派祖先附属的功能会随着涟漪向后返回而发生。

当您使用捕获时，任何委派函数（附加到祖先）发生在事件发生在元素上之前。
因此，在target之前，grandparent元素知道要单击。

因此，当您询问发生什么顺序时，事情很明显：

当您在grandparent上设置事件时，该事件是捕获的并在grandparent上设置第二个事件，该事件是 aflbbleed ，并在target上设置一个事件，该事件将是：

captured grandparent target bubbled grandparent

那么，什么时候让祖先知道在实际点击的按钮之前知道发生的点击呢？
很棒的问题！

我敢肯定，有人可以通过隐藏他们本来应该点击的东西来想到一种使人们痛苦的一种真正轻率的方式。

，但道德是您必须明确要求（将.addEventListener的第三个参数设置为true）。
另外，Oldie和其他人根本不支持捕获。

这不是一般应该使用的东西。

默认事件顺序为浏览器特定。

事件捕获：首先，外部元素的事件处理程序首先发射，内部元素的事件处理程序持续射击。

事件冒泡：内部元素的事件处理程序首先发射，外部元素的事件处理程序持续。

这两个事件订单是根本上反对的。 Explorer仅支持事件冒泡。 Mozilla，Opera 7和Konqueror支持。年龄较大 Opera和ICAB都不支持。

在Microsoft模型中，您必须将事件的cancelBubble属性设置为true。

window.event.cancelBubble = true

在W3C模型中，您必须调用事件的stopPropagation()方法。

e.stopPropagation()

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

http://www.quirksmode.org/js/events_order.html

相关内容

最新更新

热门标签：