1

使用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 的文档告诉我“这不会阻止同一元素上的其他处理程序运行”。那么不应该调用第一个处理程序吗？

4

1 回答 1

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 中:) 所以使用委托事件可能会显着提高性能。您可以从第 1 点开始查看示例。

委托事件如何工作？

让我们举个例子<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
        }
    });
于 2013-06-05T13:43:54.887 回答