为什么在 stopPropagation 之后不在同一元素上运行处理程序

Question

对于http://jsfiddle.net/mgs_jsfiddle/HXMCs/，如果鼠标移到子区域，为什么不运行第一个事件处理程序？

<div class="top">
    <div class="sub"></div>
</div>

$(".top").bind("mouseover mouseout", function(e) {
});

$(".top").on("mouseover mouseout", ".sub", function(e) {
    e.stopPropagation();
});

两个处理程序都附加到顶部元素。 stopPropagation 的文档告诉我“这不会阻止同一元素上的其他处理程序运行”。那么不应该调用第一个处理程序吗？

Answer 1

这两个事件：

$(".top").bind("mouseover mouseout", function(e) {
});

$(".top").on("mouseover mouseout", ".sub", function(e) {
    e.stopPropagation();
});

附加到.top。但第二个是委托事件，jQuery 模拟它就像它是一个普通事件一样。如果你删除stopPropagation:

$(".top").bind("mouseover mouseout", function(e) {
});

$(".top").on("mouseover mouseout", ".sub", function(e) {
});

您会注意到第二个事件首先被触发，就好像它直接附加到.sub。 jQuery 模拟委托事件的传播，就好像它是一个普通事件一样。

显然，如果子元素停止传播，则父元素将不会收到该事件。但正如我提到的，它只是 jQuery 中的一个模拟。

更新

虽然 jQuery 官网在http://api.jquery.com/on/ 上解释得很好，但我还是会尝试简单解释一下on 方法。

on 方法是在 jQuery 1.7 中引入的。它被认为可以替代之前用于绑定事件的几种方法：bind、delegate 和 live。最后两个用于附加委托事件。现在您可以使用单一方法 on 附加它们。

常规活动：

$(".top").on("mouseover mouseout", function(e) {

});

和

完全一样

$(".top").bind("mouseover mouseout", function(e) {

});

委托活动：

$(".top").on("mouseover mouseout", ".sub", function(e) {

});

和

一样

$(".top").delegate(".sub", "mouseover mouseout", function(e) {

});

委托事件有什么用途？

• 如果您的 html 是动态更改的。例如。你有一个<table> 并且你在表行上绑定了一些事件：

  $("table tr").on("click", function(e) {
  
  });
  

  此事件不会在动态插入的行上触发。一种解决方法是使用委托事件：

  $("table").on("click", "tr", function(e) {
  
  });
  

  事件附加到表而不是行。所以它可以处理以后插入的任何行。

• 如果您有大量类似的元素。在这种情况下，如果您直接在元素上绑定事件，它可能会降低您的应用程序的速度。至少在 IE 中:) 所以使用委托事件可能会显着提高性能。你可以从第一点看例子。

委托事件如何工作？

我们以<table>为例：

    $("table").on("click", "tr", function(e) {

    });

我们将事件附在桌子上，但要求它检查事件是否在 tr 发起。

上面示例的粗略实现可能如下所示：

    $("table").on("click", function(e) {
        var tr = $(e.target).parentsUntil(this, 'tr');
        if (tr.length){
            //the event was triggered on tr inside table
            //do some stuff
        }
    });