jQuery의 새로운 이벤트 바인딩 메커니즘 on()_jquery 사용에 대한 팁

오늘 jQuery의 더 이상 사용되지 않는 목록을 탐색하면서 live() 및 die()를 발견했습니다. 빠르게 살펴보니 jQuery 1.7부터 jQuery에 새로운 이벤트 바인딩 메커니즘인 on() 및 off( )가 도입되었습니다. 두 함수는 이벤트 바인딩을 균일하게 처리합니다. 기존에는 이벤트 바인딩을 처리하는 바인딩(), 라이브(), 대리자() 등의 메소드가 있었기 때문에 jQuery는 성능 최적화 및 메소드 통합 측면에서 이벤트 바인딩 메소드를 통합하고 기존 메소드를 대체하는 새로운 함수를 출시하기로 결정했습니다. .

on(이벤트,[선택기],[데이터],fn)

이벤트: 공백과 선택적 네임스페이스(예: "click" 또는 "keydown.myPlugin")로 구분된 하나 이상의 이벤트 유형입니다.

selector: 필터 이벤트를 트리거하는 선택기 요소의 하위 항목에 대한 선택기 문자열입니다. 선택기가 null이거나 생략된 경우 선택한 요소에 도달하면 이벤트가 항상 시작됩니다.

data: 이벤트가 트리거되면 event.data가 이벤트 처리 함수에 전달되어야 합니다.

fn: 이벤트가 발생했을 때 실행되는 함수입니다. false 값은 false를 반환하는 함수의 약칭으로 사용될 수도 있습니다.

바인드() 교체

두 번째 매개변수 'selector'가 null인 경우 기본적으로 on()과bind()의 사용법에 차이가 없으므로 on()에는 단지 바인드()의 'selector' 매개변수보다 하나의 옵션이 더 있다고 생각하면 됩니다. , 따라서 on()은 쉽게 바인딩()을 대체할 수 있습니다

live() 교체

1.4 이전에는 이벤트를 현재 및 미래 요소에 바인딩할 수 있기 때문에 모든 사람들이 live()를 사용하는 것을 좋아했다고 생각합니다. 물론 1.4 이후에는 Delegate()도 비슷한 작업을 수행할 수 있습니다. live()의 원리는 매우 간단합니다. 문서를 통해 이벤트를 위임하므로 이벤트를 문서에 바인딩하여 on()을 사용하여 live()와 동일한 효과를 얻을 수도 있습니다.

라이브 작성법()

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

$('#list li'). live(' click', '#list li', function() {
//함수 코드는 여기에 있습니다.
})

on() 쓰기 방법

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

$( document).on('click', '#list li', function() {
//여기에 함수 코드가 있습니다.
});

여기서 핵심은 두 번째 매개변수 'selector'가 작동 중입니다. 이는 필터 역할을 하며 선택한 요소의 하위 요소만 이벤트를 트리거합니다.

대리인() 교체
delegate()는 1.4에서 도입되어 조상 요소를 통해 하위 요소의 이벤트 바인딩 문제를 위임하기 위해 어느 정도 live()와 유사한 장점이 있습니다. . 단지 live()가 문서 요소를 통해 위임되고 위임은 모든 조상 노드가 될 수 있다는 것입니다. on()을 사용하여 Proxy를 구현하는 방법은 기본적으로 Delegate()와 동일합니다.

delegate() 작성 방법

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

$('#list').delegate('li', 'click', function() {
//여기에 함수 코드가 있습니다.
});

on() 작성 방법

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

$('#list').on('click', 'li', function() {
//함수 코드는 여기에 있습니다.
});

첫 번째와 두 번째 매개변수의 순서가 반대인 것처럼 보이지만 그 외 기본적으로는 동일합니다.

요약
jQuery는 두 가지 목적으로 on()을 출시했습니다. 하나는 인터페이스 통합이고, 다른 하나는 성능 향상이므로 지금부터 on()을 사용하세요. 바인드(), 라이브(), 델리게이트를 교체합니다. 특히, live()는 이미 더 이상 사용되지 않는 목록에 있고 언제든지 종료될 것이므로 더 이상 사용하지 마십시오. 이벤트를 한 번만 바인딩한 다음 one()을 사용하면 이에 대한 변경 사항이 없습니다.