Jquery의 바인딩 이벤트와 라이브 바인딩 이벤트의 차이점 소개

Jquery에서 이벤트를 바인딩하는 세 가지 방법이 있습니다. 클릭 이벤트를 예로 들어보세요.

(1) target.click(function(){});

(2) target.bind (" click",function(){});

(3) target.live("click",function(){});

첫 번째 방법은 실제로 이해하기 쉽습니다. 사용법은 비슷하고 on 하나만 빠졌네요

두 번째와 세 번째 방법은 모두 바인딩 이벤트이지만 Jquery의framework를 사용한다면 이에 대해 집중적으로 설명하겠습니다. 가 많이 사용되므로 둘 사이의 차이점에 특별한 주의를 기울여야 합니다.

【바인드와 라이브의 차이점】

라이브 메소드는 실제로 바인드 메소드의 변형입니다. 둘 다 이벤트를 요소에 바인딩합니다. 바인드 메소드 이 메소드는 현재 존재하는 요소에만 이벤트를 바인딩할 수 있으며 JS 및 기타 메소드를 사용하여 새로 생성된 요소에는 유효하지 않습니다. 라이브 메소드는 바인딩 메소드의 이러한 결함을 보완할 뿐이며 나중에 생성된 요소에 해당 요소를 바인딩할 수도 있습니다. . 이벤트. 그렇다면 라이브 메소드의 이 기능은 어떻게 구현됩니까? 아래에서 구현 원리에 대해 논의해 보겠습니다.

라이브 메서드가 해당 이벤트를 나중에 생성되는 요소에도 바인딩할 수 있는 이유는 "이벤트 위임"으로 귀결됩니다. 소위 "이벤트 위임"은 상위 요소에 바인딩된 이벤트를 사용할 수 있다는 의미입니다. 그 하위 요소. 라이브 메소드의 처리 메커니즘은 이벤트를 요소에 직접 바인딩하는 대신 DOM 트리의 루트 노드에 바인딩하는 것입니다. 설명하기 위한 예를 들어보세요:

   $(".clickMe").live("click",fn);
             $("body").append("<p class=&#39;clickMe&#39;>测试live方法的步骤</p>");

이 added 요소를 클릭하면 다음 단계가 발생합니다.

(1) 클릭 이벤트를 생성하고 이를 p에 전달하여 수행합니다. it 처리

(2) p에 직접 바인딩된 이벤트가 없으므로 이벤트는 DOM 트리에 직접 버블링됩니다.

(3) 이벤트는 기본적으로 DOM 트리의 루트 노드까지 버블링을 계속합니다. 이 클릭 이벤트

는 루트 노드에 바인딩되어 있습니다. (4) 라이브

로 바인딩된 클릭 이벤트를 실행합니다. (5) 바인딩된 이벤트의 객체 가 존재하는지 감지하고 계속해야 하는지 확인합니다. 바인딩 결정 이벤트를 실행합니다. $(event.target).closest('.clickMe')가 일치하는 요소를 찾을 수 있는지 여부를 감지하여 이벤트 개체를 감지합니다.

(6) (5)의 테스트를 통과한 후, 이벤트에 바인딩된 객체가 존재하면 바인딩된 이벤트가 실행됩니다.

라이브 메소드는 이벤트가 발생할 때만 이벤트에 바인딩된 객체가 존재하는지 여부를 감지하므로 나중에 추가되는 요소 및 이벤트 바인딩을 구현할 수 있습니다. 대조적으로, 바인딩은 이벤트의 바인딩 단계 중에 이벤트가 바인딩된 요소가 존재하는지 여부를 확인하고 상위 노드가 아닌 현재 요소에만 바인딩합니다.

위 분석에 따르면 라이브의 장점은 정말 대단한데 왜 바인드 방식을 사용해야 할까요? jquery가 바인드를 대체하기 위해 라이브 메소드를 사용하는 대신 바인드 메소드를 유지하는 이유는 라이브가 바인드를 완전히 대체할 수 없는 경우가 있기 때문입니다. 주요 차이점

은 다음과 같습니다. (1) 바인딩 메소드는 모든 JavaScript 이벤트를 바인딩할 수 있는 반면, 라이브 메소드는 jQuery 1.3에서 click, dblclick, keydown, keypress,

만 지원합니다.+                                        집중 및

집중 및 집중). 또한 jQuery 1.4.1에서는 hover(를 "mouseenter mouseleave"로 매핑)도 지원됩니다.

(2) live()는 DOM 순회를 통해 발견된 요소를 완전히 지원하지 않습니다. 대신 항상 선택기 바로 뒤에 .live()

메서드를 사용해야 합니다.

(3) 요소가 이벤트를 바인딩하기 위해 라이브 메서드를 사용할 때 이벤트가 전달되거나 버블링되는 것을 방지하려면 함수에서 false를 반환해야 합니다.                                 stopPropagation( ( )는 이벤트 전달이나 버블링을 방지할 수 없습니다

위 내용은 Jquery의 바인딩 이벤트와 라이브 바인딩 이벤트의 차이점 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!