直接与代表团和在jQuery中冒泡与捕获

时间:2012-10-02 17:52:11

标签: javascript javascript-events jquery

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. 第二种方法(委托)是指被称为事件冒泡的概念吗?它是事件冒泡的一个例子吗?
  3. 由于

3 个答案:

答案 0 :(得分:1)

似乎所有jQuery事件方法都使用Event Bubbling,而不是Event Capturing。

因此,您的两个示例都将使用Event Bubbling。

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


供参考,您只需查看来源即可。 http://code.jquery.com/jquery.js

答案 1 :(得分:0)

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

此事件仅将事件处理程序附加到当前存在于DOM中的Div内部的跨距。如果将新的span元素添加到div中,则该span将没有与之关联的click事件..

第一个和第二个是事件冒泡

的示例

出现了事件委托的概念,在祖先中给出了事件处理程序,并将其委托给孩子们。

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

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

这有助于

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

我不知道在jQuery库中使用事件捕获的位置

答案 2 :(得分:0)

您的问题的答案:

  1. 这不是冒泡,捕获或委派。它只是直接向元素添加事件监听器。

  2. 是的,这是代表团,在引擎盖下依赖点击冒泡。

  3. 事件冒泡和捕获是同一概念的不同实现,分别由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。