代码之家 › 专栏 › 技术社区 › Matrym

jquery 1.4中的事件委托

event-delegation hover performance jquery

3

Matrym · 技术社区 · 16 年前

我有以下代码:

$("ul.relatedAlbums li").hover(function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

我听说了一些关于活动授权和速度表现的好消息。使用jquery的delegate方法,我想它应该是这样的:

$("ul.relatedAlbums").delegate("li", "hover", function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

但是阅读文档时,它说这个方法就像使用活动事件一样。我一直都明白利用现场活动 效率低下的 . 那么,有人能告诉我这方面的最佳实践吗?

3 回复 | 直到 12 年前

1

2

Mark Schultheiss 16 年前

只需指出,.delegate()目前实际上在内部使用.live()并取消.live()的版本,这意味着需要进行一些框架工作。

除非您动态地向页面添加元素,否则可以将其用作第一个示例。.live()和.delegate在您有一个交互式页面时起作用,在该页面中您要对其中包含的元素进行更改。

编辑:向下投票者:来自jquery论坛: http://forum.jquery.com/topic/depreciating-live 引用此代码:

委托:函数(选择器、类型、数据、fn){ 返回this.live(类型、数据、fn、选择器); }

我的观点是,如果适当的话,特定的选择器将限制事件,并且仅仅选择.delegate()并不总是最好的,并且没有全局的“总是这样做”。否则,为什么不将.delegate()用于所有不好的方面呢?

何时委派合适?当您的选择器确实有一个公共父级(如op所描述的常用li)时,或者需要通过.delegate()绑定到公共父级。不适用于单数形式的选择器,但对于存在多个数或发生元素动态放置的类或元素选择器,值得检查。

2

1

Jason 12 年前

代表团概念

如果一个父级中有多个元素,并且您希望在这些元素上处理事件,则不要将处理程序绑定到每个元素。相反,请将signle处理程序绑定到其父级,并从event target获取子级。

那么,什么是JavaScript事件委托?

事件委托是一种简单的技术,通过它,您可以将单个事件侦听器附加到父元素上,该父元素将为匹配选择器的所有子元素激发,无论这些子元素现在存在还是将来添加。

事件委托使用了两个经常被忽视的javascript事件特性:事件冒泡和目标元素

什么是事件冒泡?

在事件冒泡中,事件首先由最内部的元素捕获和处理,然后传播到外部元素。

什么是目标元素?

任何事件的目标元素都是源元素,并存储在事件对象的属性中。

例子

<div id="container">
<ul id="list">
    <li><a href="http://domain1.com">Item 1</a></li>
    <li><a href="/local/path/1">Item 2</a></li>
    <li><a href="/local/path/2">Item 2</a></li>
    <li><a href="http://domain4.com">Item3</a></li>
</ul>
</div>

单击列表组中的锚时,我们希望将其文本记录到控制台。通常,我们可以使用.on()方法直接绑定到每个锚的click事件:

// attach a directly bound event
   $( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
    });

虽然这很好用,但也有缺点。考虑当我们在绑定了上述侦听器之后添加新的锚时会发生什么:

// add a new element on to our existing list
 $( "#list" ).append( "<li><a href='#'>Item 5</a></li>" )

如果我们点击我们新添加的项目,什么都不会发生。这是因为我们先前附加的直接绑定事件处理程序。直接事件仅在调用.on()方法时附加到元素。在本例中,由于调用.on()时新的锚不存在,因此它不获取事件处理程序。

因为我们知道事件如何冒泡,所以可以创建委托事件:

// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

注意我们是如何将a部分从选择器移动到.on()方法的第二个参数位置的。第二,selector参数告诉处理程序监听指定的事件,当它听到该事件时,检查该事件的触发元素是否与第二个参数匹配。在本例中,触发事件是我们的锚标记,它与该参数匹配。由于匹配,我们的匿名函数将执行。我们现在已经将一个单击事件侦听器附加到我们的上,它将侦听其子锚定上的单击,而不是仅将未知数量的直接绑定事件附加到现有锚定标记。

活动代表团的优势是什么?

只在页面上附加一个事件侦听器,而不是500个动态创建的元素仍将绑定到事件处理程序。

希望这能帮助您直观地了解活动授权背后的概念,并使您相信授权的力量! 参观: http://www.scriptcafe.in/2014/03/what-is-event-delegation-in-jquery.html

3

0

Mark 16 年前

事件委托允许您不将事件绑定到单个元素,而是绑定到元素的公共父元素。

但是.live()的效率很低,因为当事件冒泡时,它会冒泡到文档中,这可能与您可以手动指定的公共父级相差很多步。

委托通过允许您指定一个更近的父级(不一定是文档)来修复此问题。

简而言之,使用.delegate(),它得到了关于.live()的所有优点,并修复了有问题的方面。

换一种说法是:.live()默认情况下是文档的气泡。您可以指定一个更近的上下文,这样可以消除它的低效性。.delegate()只是帮助您做到这一点的sugar方法。