Jquery 바인딩 이벤트(바인드와 라이브의 차이점 소개)_jquery

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

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

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

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

첫 번째 방법은 이해하기 쉽습니다. 사실 일반과 동일합니다. JS의 사용법은 on이 빠진 것 빼고는 비슷합니다.

두 번째와 세 번째 메소드는 모두 바인딩 이벤트이지만 매우 다르기 때문에 중점적으로 설명하겠습니다. Jquery를 사용한다면 프레임워크가 꽤 많이 사용되기 때문에 둘 사이의 차이점에 특히 주의해야 합니다.

[바인드와 라이브의 차이점]

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

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

코드 복사 코드는 다음과 같습니다.

$(" .clickMe" ).live("click",fn);
$("body").append("

라이브 메소드 테스트 단계

");

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

(1) 클릭 이벤트를 생성하고 처리를 위해 div에 전달합니다.

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

(3) 이벤트는 DOM 트리의 루트 노드에 도달할 때까지 계속 버블링됩니다. 루트 노드가 바인딩됨 이 클릭 이벤트를 설정

(4) 라이브로 바인딩된 클릭 이벤트를 실행

(5) 바인딩된 이벤트의 개체가 존재하는지 감지하고 필요한지 확인 바인딩된 이벤트를 계속 실행합니다. 이벤트 개체 감지는

$(event.target).closest('.clickMe')가 일치하는 요소를 찾을 수 있는지 여부를 감지하여 수행됩니다.

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

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

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

(1) 바인딩 메소드는 모든 JavaScript 이벤트를 바인딩할 수 있는 반면 라이브 메소드는 jQuery1.3에서 click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout만 지원합니다. , mouseover 및 mouseup jQuery 1.4.1에서는 focus 및 blue

이벤트도 지원됩니다(버블링할 수 있는 보다 적절한 focusin 및 focusout에 매핑됨). 또한 jQuery 1.4.1에서는 hover("mouseenter mouseleave"에 매핑됨)도 지원됩니다.

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

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