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
});
我在我的代码中使用了上述两种方法。我知道第二种方法更好,因为它只有单一的处理程序。我的问题是,
由于
答案 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)
您的问题的答案:
这不是冒泡,捕获或委派。它只是直接向元素添加事件监听器。
是的,这是代表团,在引擎盖下依赖点击冒泡。
事件冒泡和捕获是同一概念的不同实现,分别由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。