jQuery_jquery의 on() 메소드 사용 예에 ​​대한 자세한 설명

본 글은 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()을 통해 구현됩니다

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

bind: function(types, data, fn ) {
           return this.on(types, null, data, fn );
},
바인딩 해제: 함수( 유형, fn ) {
          return this.off(types, null, fn );
},

라이브: 함수( 유형, 데이터, 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()에 바인딩된 메서드를 제거합니다.

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

$(document).ready(function(){
$("p").on("클릭",function(){
$(this).css("배경색","분홍색");
});
$("버튼").click(function(){
$("p").off("클릭");
});
});

2. 여러 이벤트가 동일한 기능에 바인딩됩니다

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

$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("소개");
});
});

3. 여러 이벤트를 다양한 기능에 바인딩

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

$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("배경색","lightgray");},
mouseout:function(){$("body").css("Background-color","lightblue");},
클릭:function(){$("body").css("배경색","노란색");}
});
});

4. 맞춤 이벤트 바인딩

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

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! 정말 아름다운 이름이네요!").show();
});
$("버튼").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5. 함수에 데이터 전달

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

function handlerName(event)
{
경고(event.data.msg);
}

$(문서).ready(함수(){
$("p").on("click", {msg: "방금 나를 클릭했습니다!"}, handlerName)
});

6. 생성되지 않은 요소에 적용 가능

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

$(document).ready(function(){
$("div").on("클릭","p",function(){
$(this).slideToggle();
});
$("버튼").click(function(){
$("

새로운 문단입니다.

").insertAfter("button");
});
});

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.