본 글은 jQuery on() 메소드의 사용법을 예시와 함께 분석한 글입니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
1. jQuery on() 메소드 사용:
on(이벤트,[선택기],[데이터],fn)
이벤트: 공백으로 구분된 하나 이상의 이벤트 유형 및 선택적 네임스페이스(예: "click" 또는 "keydown.myPlugin")입니다.
selector: 이벤트를 트리거한 선택기 요소의 필터 하위 항목에 대한 선택기 문자열입니다. 선택기가 null이거나 생략된 경우 선택한 요소에 도달하면 이벤트가 항상 시작됩니다.
data: 이벤트가 트리거되면 event.data가 이벤트 핸들러 함수에 전달되어야 합니다.
fn: 이벤트가 트리거될 때 실행되는 함수입니다. false 값은 false를 반환하는 함수의 약칭으로 사용될 수도 있습니다.
2. jQuery on() 메소드의 장점:
1. 이벤트 통합 바인딩 방법 제공
2. 여전히 .delegate()의 장점을 제공합니다. 물론 필요한 경우 .bind()를 직접 사용할 수도 있습니다
3. .bind(), .live(), .delegate()와의 비교:
1. 실제로 .bind(), .live(), .delegate()는 모두 .on()을 통해 구현됩니다
라이브: 함수( 유형, 데이터, fn ) {
jQuery( this.context ).on( 유형, this.selector, 데이터, fn );
이것을 돌려주세요;
},
다이: 함수( 유형, fn ) {
jQuery( this.context ).off( 유형, this.selector || "**", fn );
이것을 돌려주세요;
},
대리자: 함수( 선택기, 유형, 데이터, fn ) {
return this.on( 유형, 선택기, 데이터, fn );
},
위임 취소: 함수(선택기, 유형, fn) {
// ( 네임스페이스 ) 또는 ( 선택기, 유형 [, fn] )
반환 인수.길이 === 1 ? this.off( 선택기, "**" ) : this.off( 유형, 선택기 || "**", fn );
}
2. .bind()를 사용하면 비용이 매우 높습니다. 동일한 이벤트 핸들러를 일치하는 모든 DOM 요소에 연결합니다.
3. 더 이상 .live()를 사용하지 마세요. 더 이상 권장되지 않으며 많은 문제가 있습니다
4. .delegate()는 효율성을 향상시키는 좋은 방법을 제공하며 동적으로 추가된 요소에 이벤트 처리 방법을 추가할 수 있습니다.
5. .on()을 사용하여 위의 세 가지 메서드를 대체할 수 있습니다
4. jQuery on() 메소드 사용 예시
1. 클릭 이벤트를 바인딩하고 off() 메서드를 사용하여 on()에 바인딩된 메서드를 제거합니다.
2. 여러 이벤트가 동일한 기능에 바인딩됩니다
3. 여러 이벤트를 다양한 기능에 바인딩
4. 맞춤 이벤트 바인딩
5. 함수에 데이터 전달
$(문서).ready(함수(){
$("p").on("click", {msg: "방금 나를 클릭했습니다!"}, handlerName)
});
6. 생성되지 않은 요소에 적용 가능
새로운 문단입니다.
").insertAfter("button");이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
