jquery에서 클릭 이벤트를 동적으로 추가하는 단계에 대한 자세한 설명

이번에는 jquery동적 클릭 이벤트 추가에 대한 자세한 단계별 설명을 가져왔습니다. jquery가 동적으로 클릭 이벤트를 추가할 때의 주의사항은 무엇인가요? 다음은 실제 사례입니다.

일부 이벤트를 DOM 요소에 바인딩하려고 할 때 일반적으로 다음 네 가지 방법을 사용합니다.
bind(),on(),live(),delegate()처음 두 가지 방법을 더 사용해야 합니다. 다음은 네 가지 방법에 대한 나의 이해입니다.

• Bind(): .bind()는 지정된 function과 이벤트를 DOM에 바인딩하는 가장 직접적인 바인딩 방법입니다. 이벤트 처리에서 브라우저 호환성 문제를 해결했지만 이 방법에는 여전히 몇 가지 문제가 있습니다. 코드:

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

위의 두 줄의 코드는 동일한 작업을 수행합니다. 즉, 일치하는 모든 요소에 이벤트 핸들러를 추가하는 것입니다. 여기에는 몇 가지 효율성 문제가 있습니다. 한편으로는 모든 태그에 클릭 이벤트를 추가합니다. 반면에 이 프로세스는 모두 실행되므로 비용이 많이 듭니다. 동일한 작업이 여러 번 실행됩니다. (부모 요소에 연결하고 버블링을 통해 각각을 구별한 다음 이벤트 핸들을 실행할 수 있습니다).
장점

• 이 방법은 다양한 브라우저 간의 이벤트 처리에 대한 호환성 솔루션을 제공합니다.

• 이벤트를 요소에 바인딩하는 것이 매우 편리합니다

• .click() , .hover()... 매우 편리한 타임 바인딩은 바인드의 단순화된 처리 방식입니다

• ID로 선택된 요소에 매우 좋으며, 빠르게 Hooking할 수 있을 뿐만 아니라(페이지는 하나의 ID만 가질 수 있음), 이벤트가 발생하면 핸들러가 즉시 실행할 수 있습니다(나중 라이브, 위임과 동일) 구현 방법

단점

• 필터링된 요소의 모든 이벤트에 이벤트를 바인딩합니다

• 다음 요소에 바인딩되지 않습니다. 실행 후 동적으로 추가됩니다

• 필터링된 요소가 많으면 효율성 문제가 발생합니다

• 페이지 로드 시 Bind()는 완료되어야만 수행할 수 있으므로 효율성 문제가 발생할 수 있습니다.

---

.live()
.live() 메서드는 이벤트 위임 개념을 사용하여 이벤트 바인딩을 처리합니다. .bind()를 사용하여 이벤트를 바인딩하는 것과 같습니다. .live() 메소드는 해당 이벤트를 선택한 요소의 루트 요소인 document 요소에 바인딩합니다. 그런 다음 버블링되는 모든 이벤트는 동일한 핸들러로 처리될 수 있습니다. 처리 메커니즘은 다음과 같습니다. 이벤트가 문서에 표시되면 jQuery는 선택기/이벤트 메타데이터를 조회한 다음 호출해야 할 핸들러를 결정합니다. 하지만 최신 jquery 버전에서는 삭제된 것 같습니다.

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

장점:

• 여기에는 이벤트 바인딩이 하나만 있습니다. 이는 .bind()처럼 모든 요소를 ​​하나씩 바인딩하는 대신 문서에 바인딩됩니다.

• 동적으로 추가된 요소는 여전히 그대로 유지됩니다. 이벤트의 실제 바인딩은 문서에 있기 때문에 이전에 바인딩된 이벤트를 트리거할 수 있습니다

• 문서가 준비되기 전에 필요한 이벤트를 바인딩할 수 있습니다

단점:

• From 1.7부터 더 이상 사용되지 않으므로 단계적으로 제거해야 합니다.

• 체이닝이 올바르게 지원되지 않습니다

• event.stopPropagation()을 사용할 때 문서에 도달해야 하기 때문에 쓸모가 없습니다.

• 모든 선택기/이벤트가 문서에 바인딩되어 있기 때문에
  그래서 우리가 사용할 때 어떤 이벤트가 호출되는지 선택하는 matchSelector 메소드는 매우 느릴 것입니다

• 이벤트가 발생하는 요소가 DOM 트리에서 매우 깊은 곳에 있으면 성능 문제가 발생합니다

---

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

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

优点：

• 你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了

• jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

• 可以用在动态添加的元素上

缺点：

• 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

---

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#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 ) {} );

优点：

• 提供了一种统一绑定事件的方法

• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题

• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

• 我们可以用.on()来代替上述的3种方法

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS选择器使用方法总结

webkit-font-smoothing字体抗锯齿渲染使用案例详解

위 내용은 jquery에서 클릭 이벤트를 동적으로 추가하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!