javascript - jQuery 事件监听器在应用选择器之前触发？

Question

我卡在了一些事件监听器上。单击一个元素时，我想为单击创建另一个监听器。出于某种原因，他们都在开火。这是代码和一个 jsbin:http://jsbin.com/uHIyiGi/2/editHTML

<div class="wrap">
 <button>Click me</button>
</div>

JS

$('button').on('click', function(event){
  $('body').append('<p>button clicked</p>');
  $('.wrap').addClass('clicked');

  $('body').on('click', '.clicked', function(e){
    $('body').append('<p>.clicked clicked</p>');
    $('.wrap').removeClass('clicked');
    $('body').off('click', '.clicked');
  });
});

根据我对事件监听器的理解，第二个事件监听器应该在“.clicked”元素具有完整的点击事件(鼠标按下和鼠标向上)之前触发，但它在第一次点击时触发，这意味着该事件是即使元素在事件之后才具有触发器类，也会被触发。我看到事件监听器每次都成功删除，但在我认为它应该被调用之前就被调用了。所以，我现在真的很困惑......有什么建议吗？我希望在不久的将来我有一个脸掌。

Answer 1

事件气泡。当您单击按钮时，您将向正文添加一个事件。一旦按钮的事件处理程序完成(意味着包装现在有一个 clicked 类)，它就会继续在 DOM 中冒泡，直到它到达正文。由于正文现在有一个新的点击事件，所以该事件也会被触发。 jQuery 然后在正文中查找与 .clicked 选择器匹配的元素，并在找到的任何元素上调用处理程序。要停止这种情况，您可以使用 setTimeout 延迟将事件绑定(bind)到正文，或者停止按钮的单击事件的传播，这样它就不会冒泡到正文。

$('button').on('click', function(event){
    event.stopPropagation();
    ...

时间线:

1. 触发 mousedown 事件，然后在按钮上触发 mouseup 事件
2. 在按钮上触发点击事件处理程序
3. clicked 类添加到 .wrap div
4. click 事件绑定(bind)到正文，委托(delegate)给匹配 .clicked 的元素>
5. 事件通过 dom 向上冒泡到正文
6. 在正文上触发点击事件处理程序
7. jQuery 的点击事件处理程序会查找与 .clicked 选择器匹配的当前元素(正文)的后代元素
8. 它找到具有 clicked 类的 .wrap div 并调用该元素的事件处理程序。