0

HTML

<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

jQuery

$('div span').on('click', function(){
  //direct - 1st method
});

$('div').on('click','span', function(){
  //delegation - 2nd method
});

我在我的代码中使用了上述两种方法。我知道第二种方法更好，因为它只有一个处理程序。我的问题是，

  1. 第一种方法（直接）是指称为事件捕获的概念吗？它是事件捕获的示例吗？
  2. 第二种方法（委托）是指称为事件冒泡的概念吗？它是事件冒泡的一个例子吗？

谢谢

4

3 回答 3

1

似乎所有 jQuery 事件方法都使用事件冒泡，而不是事件捕获。

因此，您的两个示例都将使用事件冒泡。

在某些浏览器中存在焦点和模糊事件没有冒泡的边缘情况。在受影响的浏览器中，事件捕获用于焦点和模糊事件。

作为参考，您可以简单地查看源代码。http://code.jquery.com/jquery.js

于 2012-10-02T18:03:19.343 回答
0 
$('div span').on('click', function(){
  //direct - 1st method
});

此事件仅将事件处理程序附加到当前存在于 DOM 中的 Div 内的跨度。即；如果将新的 span 元素添加到 div ，则该 span 不会有与之关联的点击事件。

第一个和第二个是事件冒泡的例子

出现了事件委托的概念，在祖先中，事件处理程序被赋予了事件处理程序，并且被委托给了孩子。

第二个例子是事件委托的例子。其中事件附加到父元素..所以div类中的所有span元素都附加到事件处理程序..

因此，如果将新的 span 元素添加到 div ，因为该事件与 span 的祖先相关联，在这种情况下该事件将触发

这在某些情况下会有所帮助

$('div').on('click','span', function(){
  //delegation - 2nd method
});

我不知道 jQuery 库中在哪里使用事件捕获

于 2012-10-02T18:01:25.477 回答
0

回答您的问题：

  1. 这不是冒泡、捕获或委托。它只是将事件侦听器直接添加到元素。

  2. 是的，这是在引擎盖下依赖于点击冒泡的委托。

事件冒泡和捕获是同一概念的不同实现，分别由 Microsoft 和 Netscape 提供。两者都在监听父元素上的事件。请注意，它们以不同的顺序发生：捕获从父级到后代发生，而冒泡则相反。

PPK 网站上的更多详细信息及其历史：http ://www.quirksmode.org/js/events_order.html

现代浏览器同时支持捕获和冒泡（冒泡是现在的默认设置），您可以在使用原生 addEventListener 时指定要使用哪一个：

element.addEventListener('click', function(){}, false); // 气泡 element.addEventListener('click', function(){}, true); // 捕获

但是，某些事件，如焦点、模糊、滚动、鼠标悬停等仅通过捕获阶段事件支持，因此在使用 addEventListener 时必须指定“true”。

不幸的是，看起来 jQuery 不支持所有捕获阶段事件的委托，只支持焦点和模糊（参见https://github.com/jquery/jquery/blob/ad032d3c7df04827989a4187117614c29bf3a4ad/src/event.js#L728）。

简短的回答：对于焦点和模糊以外的捕获阶段事件的委托，您需要使用本机 addEventListener，而不是 jQuery。

于 2014-04-09T02:13:21.390 回答