事件侦听器中的jQuery绑定事件

Question

我有一个链接，一个点击事件侦听器绑定到它。在click上，它将一个单击事件侦听器附加到文档，这次事件是命名空间的，这样我就可以轻松地删除它。在附加第二个事件时，它立即被触发。为什么会发生这种事？我最好的猜测是，当新事件附加到文档时，该事件仍在冒泡地出现在dom树上。正因为如此，它触发了这两个事件。请参见下面的JSFiddle。

HTML

<a href="#" id="example">Click Me</a>

Javascript

$('#example').on('click', function(e) {
    $(document).on('click.example', function(e) {
        alert('example event triggered');
    });
});

我想要完成的是，在单击一个按钮时，我插入一个dom元素。插入时，我希望将事件侦听器附加到触发时检查事件目标的文档，以检测是否有单击事件发生在插入元素之外。如果目标在它的范围内，它应该什么也不做。如果目标在元素之外的任何地方，它应该隐藏该元素。

Answer 1

这是因为事件的传播

​

$('#example').on('click', function(e) {
  $(document).on('click.example', function(e) {
    alert('example event triggered');
  });
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="example">Click Me</a>

​

当事件仍然在anchor元素中时，您正在注册处理程序，并且事件绑定到文档对象，文档对象是当前元素的祖先。因此，现在当事件最终被传播并到达document对象时，它将找到绑定到它的单击处理程序并触发它。

注意:您不应该只是在每次点击中添加新的处理程序.希望你已经处理好了