집 > 기사 > 웹 프론트엔드 > Jquery에서 .bind(), .live(), .delegate() 및 .on() 간의 차이점 예 공유

Jquery에서 .bind(), .live(), .delegate() 및 .on() 간의 차이점 예 공유

小云云원래의: 2017-12-31 09:44:351532검색

이 기사에서는 주로 Jquery의 .bind(), .live(), .delegate() 및 .on() 간의 차이점을 공유합니다. .bind() 및 .live()는 일상적인 개발에 자주 사용됩니다. 그러나 일부 학생들은 이 네 가지에 대해 의구심을 갖고 있으므로 다음 기사에서는 주로 .bind(), .live(), .delegate() 및 . .on()이 도움이 될 수 있습니다.

소개

최근에 많은 웹 개발자가 jquery의 .bind() .live() .delegate() 및 .on() 메서드에 대해 많은 의구심을 가지고 있다는 것을 알게 되었습니다. 이러한 질문은 일반적으로 두 질문 사이의 실제 차이점과 사용 시기를 중심으로 이루어집니다. 다음 기사에서는 이 네 가지 방법의 차이점을 자세히 소개합니다. 각 방법을 자세히 소개하므로 자세한 소개를 살펴보겠습니다.

이 방법을 깊이 이해하기 전에 먼저 시작하겠습니다. jquery 예제 메소드를 작성하기 위한 샘플로 일반적인 HTML 조각입니다.

<ul id="members" data-role="listview" data-filter="true">
 <!-- ... 其他li ... -->
 <li>
 <a href="detail.html?id=10" rel="external nofollow" >
  <h3>John Resig</h3>
  <p><strong>jQuery Core Lead</strong></p>
  <p>Boston, United States</p>
 </a>
 </li>
 <!-- ... 其他li ... -->
</ul>

Bind 메소드

.bind() 메소드를 사용하여 이벤트 유형과 이벤트 핸들러를 선택한 DOM 요소에 직접 등록하세요. 이 방법은 가장 오랫동안 사용되었으며, 이 기간 동안 다양한 브라우저 간 문제를 매우 잘 해결했습니다. 이를 사용하여 이벤트 핸들러를 연결하는 경우 여전히 매우 간결하지만 아래에 나열되는 몇 가지 성능 문제도 있습니다.

/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
 .click() 方法只是.bind() 方法的简写。
*/

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

.bind() 메서드는 이벤트 핸들러 함수를 일치하는 모든 태그에 연결합니다. 이 접근 방식은 좋지 않습니다. 이렇게 하면 일치하는 모든 요소에 걸쳐 추가 이벤트 핸들러를 암시적으로 반복할 뿐만 아니라 이러한 동일한 이벤트 핸들러가 일치하는 모든 상위 태그에 계속해서 추가되기 때문에 이 작업은 매우 낭비적입니다(중복).

장점:

다양한 브라우저에 적용 가능
이벤트 처리 기능 연결이 매우 편리하고 빠릅니다.
.click(), .hover() 및 기타 약어 메소드를 사용하여 이벤트 처리를 더 많이 연결할 수 있습니다. 편리함 기능
간단한 ID 선택기의 경우 .bind() 메서드를 사용하면 이벤트 핸들러를 빠르게 연결할 수 있을 뿐만 아니라 이벤트가 트리거되면 이벤트 핸들러가 거의 즉시 호출됩니다.

단점:

이 접근 방식은 모든 이벤트 핸들러를 일치하는 모든 요소에 연결합니다.
동일한 선택기로 요소를 동적으로 일치시킬 수 없습니다.
많은 수의 일치하는 요소를 작업할 때 성능에 영향을 미칩니다. 문제
추가 작업이 미리 수행되므로 페이지가 로드될 때 성능 문제가 발생할 수 있습니다.

Live 메서드 사용

live() 메서드는 이벤트 위임 개념을 사용하여 "마법"을 구현합니다. 바인딩() 메서드를 호출하는 것처럼 쉽게 live() 메서드를 호출할 수 있습니다. 그러나 표면적으로는 .live() 메서드가 이전 메서드와 매우 다르게 구현됩니다. .live() 메소드는 이벤트 핸들러와 연관된 선택기와 이벤트 정보를 문서(즉, 문서)의 루트 요소에 연결합니다. 문서에 이벤트 정보를 등록하면 이 이벤트 핸들러는 문서에 버블링되는 모든 이벤트(예: 위임된 이벤트, 전파된 이벤트)를 호출할 수 있습니다. 이벤트가 문서 요소에 버블링되면 JQuery는 선택기나 이벤트 메타데이터를 사용하여 호출해야 하는 이벤트 핸들러(있는 경우)를 결정합니다. 이 추가 작업은 사용자 상호 작용 중 성능에 일정한 영향을 미치지만 이벤트 등록의 초기 프로세스는 매우 빠릅니다. 위의 바인딩() 메서드 예제와 비교하여

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） 
 ( "#members li a" & "click" ) */

$( "#members li a" ).live( "click", function( e ) {} );

.bind() 예제의 한 가지 장점은 이벤트 핸들러를 문서 요소에 여러 번 연결하는 것이 아니라 한 번만 연결한다는 것입니다. 이는 속도가 더 빨라질 뿐만 아니라 낭비되는 성능도 줄여줍니다. 그러나 이 방법을 사용하면 아래와 같은 많은 문제가 발생합니다.

장점:

모든 이벤트 처리 함수는 바인딩()처럼 여러 번 등록하는 대신 한 번만 등록됩니다.
bind() 메서드를 live() 메서드로 업그레이드하는 것은 매우 편리합니다. "바인드"와 "라이브"
DOM에 동적으로 추가된 요소도 마술처럼 일치합니다. 실제 이벤트 정보가 문서 요소에 등록되기 때문입니다
이벤트 처리기 기능을 연결하기 전에 문서가 로드되어 잠재적으로 쓸모없는 시간을 더 잘 활용하는 데 도움이 될 수 있습니다

단점:

이 방법은 Jquery 1.7 이상 버전에서는 더 이상 사용되지 않습니다. 코드에서 점차적으로 사용을 포기해야 합니다
이 방법을 사용하면 연결 작업이 제대로 지원되지 않으며 일부 오류가 발생할 수 있습니다
이러한 일치 작업은 문서 요소에 이벤트 핸들러를 등록하는 데만 사용되므로 기본적으로 쓸모가 없습니다.
event.stopPropogation( ) 이벤트는 항상 문서 요소에 위임되었기 때문에 메서드는 쓸모가 없습니다
因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题

使用Delegate方法

.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。就像是live()方法一样，这个方法使用事件委托来正确地工作。

如果你跳过了前面关于 .live() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

$( "#members" ).delegate( "li a", "click", function( e ) {} );

.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外，使用.delegate()方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

你可以选择将选择器或者事件信息附加到指定的元素。
匹配操作实际上在前面并没有执行，而是用来注册到指定的元素。
链式操作可以得到正确的支持
Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过因为你可以选择哪一个元素作为根元素，所以筛选的量会大幅减少
因为这项技术使用了事件委托机制，它可以匹配到被动态地添加到DOM的元素
你可以在文档加载完之前连接事件处理函数

缺点:

从.bind()方法不可以直接升级到.delegate()方法
Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而，附加到指定根元素的元数据会比使用live()方法的时候要小得多。
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的,这可能导致页面加载时存在性能问题

使用On方法

你知道吗，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截取出来的

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点，使用.on()方法看起来像以下方式一样...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

你可能注意到了，我如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。 .on()方法的出现为API带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点:

使各种事件绑定方法一致。
因为在Jquery源码中.bind() ， .live() 和.delegate()方法实际上是调用了此方法，因此简化了jQuery代码库并删除了一级重定向。
这种方式仍然提供了使用.delegate()方法的优点，并且仍然提供对.bind()方法的支持，如果你需要的话。

缺点:

给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变。

总结

如果你对不同的绑定事件方法有所迷惑，那么不要担心，因为API发展了一段时间了，有很多前人的经验可以借鉴。也有很多人将这些方法视为魔法，不过一旦你了解了他们工作背后的原理，将帮助您了解如何更好地处理项目。
以下是这篇文章的精华所在...

使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上
你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题
使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
新的.on()方法其实就是模拟.bind() ， .live() 和.delegate()实现的语法糖，具体取决于你如何调用它
新的方向是使用新的.on()方法。先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！

위에 나열된 장점이나 단점에 새로 추가할 사항이 있나요? 최근에 Delegate() 메소드를 사용하기 시작하셨나요? 새로운 .on() 메소드에 대해 어떻게 생각하시나요? 댓글로 여러분의 생각을 알려주세요! 감사해요!

Jquery에서 .bind(), .live(), .delegate() 및 .on() 간의 차이점 예 공유

관련 기사