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>

span1
span2
span3
span4
document.getElementById（'parent-list'）。addEventListener（'click'，函数（e）{
if（e.target&&e.target.nodeName=='SPAN'）{
var classes=e.target.className.split（“”）；
对于（var i=0；i而言，默认事件顺序是特定于浏览器的

事件捕获：外部元素的事件处理程序首先激发，内部元素的事件处理程序最后激发

事件冒泡：首先激发内部元素的事件处理程序，最后激发外部元素的事件处理程序

这两个事件顺序完全相反。Explorer只支持
事件冒泡Mozilla、Opera 7和Konqueror都支持
Opera和iCab都不支持

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

window.event.cancelBubble=true

在W3C模型中，必须调用事件的
stopPropagation（）
方法

e.stopPropagation（）

想象一下，您的html如下所示：

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

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);

冒泡与捕获实际上与您的假设没有任何关系，在这两种情况下（在W3C兼容浏览器上），您都可以使用事件侦听器连接到父级，以侦听在子级上触发的事件

不同之处在于，冒泡假设事件链从目标开始，然后通过父链向上运行，就像一颗炸弹在零地爆炸，并向外发出震荡波

捕获从
窗口开始（或从
开始），然后向下到目标元素

因此，当您使用冒泡（更像是涟漪）时，直接在元素上设置的任何函数都会首先发生，而任何附加到祖先的委托的函数都会随着涟漪返回链而发生

使用捕获时，任何附加到祖先的委派的函数都会在元素上发生事件之前发生。

因此，
grandparent
元素在
target
之前就知道单击

所以当你问事情发生的顺序时，事情很明显：

当您在
祖父母
上设置一个捕获的事件，在
祖父母
上设置一个冒泡的第二个事件，并在
目标
上设置一个事件，其顺序为：

俘虏的祖父母
目标
bubble祖父母

那么什么时候让祖先知道在实际单击按钮之前发生的单击是有益的呢？

好问题

我相信有人能想到一些东西，这不仅仅是一种通过隐藏他们应该点击的东西来让人们痛苦的阴险方式

但寓意是你必须明确地要求它（将
.addEventListener
的第三个参数设置为
true
。

另外，oldIE和其他人根本不支持捕获

这不是一般情况下应该使用的东西。
不是直接复制品，但应该可以回答您关于事件传播顺序的问题。@FabricioMatte我的问题是关于默认事件顺序，而不是它们是什么。我在那篇文章中找不到类似的东西。如果我错了，请纠正我。冒泡（从最里面到最外面）在所有现代浏览器中都是默认值，由jQuery.Capture使用（从最外层到最内层）不是跨浏览器的，大部分是旧的IE专有AFAIK。@Fabricio Mattécapturing实际上根本不受ghettoIE支持，而W3C要求两者兼容。ghettoIE做对了其中一件事，以及基于边框而非内容的CSS框大小。@Norguard是的，你说得对。我必须重新阅读一些文章再次退出默认事件传播顺序。
=]

+1您让我在“默认事件顺序是特定于浏览器的。”@Teeg:可能还会说：IE不符合W3，再次：-）

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);