jQuery의 새로운 이벤트 바인딩 메커니즘 on() 샘플 application_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() { 
//function code here. 
});

글쓰는 방법()

$(document).on('click', '#list li', function() { 
//function code here. 
});

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

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

대리자() 작성 방법

$('#list').delegate('li', 'click', function() { 
//function code here. 
});

()에 쓰는 방법

$('#list').on('click', 'li', function() { 
//function code here. 
});

첫 번째와 두 번째 매개변수의 순서가 뒤바뀐 것 같지만 그 외 기본적으로는 동일합니다.

요약

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