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方法。

在jQuery 1.7中引入了

on方法。它被认为是以前用于绑定事件的几种方法的替代：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
        }
    });

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

1 个答案: