javascript - JQuery.live() 无法正常工作

Question

我知道 live 在 1.7 版本中已被弃用，并在 1.9 版本中被删除，并且不再推荐使用它。但是，由于我正在准备面试机器测试，因此我试图了解 live 和 on 之间的区别。 Document说

Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.

因此我尝试了这个。标记:

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

脚本:

$(document).ready(function () {
        $('span').live("click",function () {
            alert('span');
        });
        $('a').click(function () {
            alert('span a');
        });
        $('h1').click(function () {
            alert('span a h1');
            event.stopPropagation();
        });
        $('div').click(function () {
            alert('span a h1 div');
        });
    });

我使用的是 Jquery 1.7 版本，其中同时存在 live 和 on 。

发生了什么:

span 的
1. live 没有被调用，而是直接调用 a 的 click。
2. 如果我删除 live 之外的所有其他事件，则会调用该事件。
3. 正如文档所说，它的作用完全相反，即如果我使用 event.stopPropagation(); ，它就会停止事件冒泡

JSFiddle

Answer 1

live 附加的事件处理程序始终附加到文档。如果您在 live 的回调中调用 event.stopPropagation，那么该事件已经冒泡到文档中，因此它对直接附加的事件处理程序没有任何影响。

当事件到达 h1 元素时，您的 event.stopPropagation() 被调用，因此它永远不会到达事件所在的 document已附加 live 事件处理程序。

使用on，您可以创建 jQuery 支持的所有类型的事件处理。如果您查看 jQuery 的源代码，您会发现在 1.7 中，live 函数仅映射到 on:

live: function( types, data, fn ) {
   jQuery( this.context ).on( types, this.selector, data, fn );
   return this;
}

删除 live 的原因是为了让 API 更清晰、更合乎逻辑地了解事件何时发生以及在何处捕获。

编辑

您的 DOM 以及事件处理程序附加到的位置:

 document    $('span').live("click") **not called**  (equal to: $(document).on('click', 'span') ) 
    |
   div       $('div').click() **not called**
    |
    h1       $('h1').click() + event.stopPropagation() **the propagation (bubbling)  is stopped here not reaching the document**
    |
    a        $('a').click()
    |
   span      **event happens here and bubbles up**