JQuery_jquery에서 이벤트 바인딩(bind()) 및 이벤트 제거(unbind())

가끔 이벤트가 실행된 후 이벤트 효과를 취소하고 싶을 경우, 특정한 방법을 통해 처리할 수 있습니다. 예를 들어, 이벤트의 효과를 제거하려면 바인딩()(바인딩 이벤트) 및 unbind()(bind() 메서드를 통해 추가된 이벤트 제거) 메서드를 사용합니다.

예를 들어 다음과 같은 경우는

코드 복사 코드는 다음과 같습니다. $(함수(){ $('#btn').bind("클릭", function(){ 을 통해 }).bind("클릭", function(){ 을 통해 }).bind("클릭", function(){ ~ $('# test').append(" 바인딩 함수 3

"); }); })

html 부분:

코드 복사 코드는 다음과 같습니다. 나를 클릭하세요

버튼 btn을 클릭하면 세 개의 클릭 이벤트가 트리거됩니다. 여기서 추가() 메서드는 세 개의 단락 내용을 div 레이어에 전달합니다. append() 메서드는 지정된 콘텐츠를 선택한 요소의 끝에 추가합니다(여전히 내부적으로). html() 메서드와는 여전히 다릅니다. html() 메서드는 요소 끝에 내용을 추가하는 대신 전체 요소의 내용을 변경합니다. text() 메서드는 html() 메서드와 유사하지만 차이점은 html 코드를 html() 메서드로 작성할 수 있고 올바르게 구문 분석할 수 있는 반면, text()는 html 코드만 일반 코드로 처리할 수 있다는 것입니다. 끈.

여기를 클릭할 때마다 div 레이어 끝에 문단을 추가하는 이벤트가 실행됩니다. 다음 코드는 이벤트 효과를 취소합니다. 이벤트를 삭제하여 클릭 효과를 무효화할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $('#btn').bind("클릭", function(){ 을 통해 }).bind("클릭", function(){ 을 통해 }).bind("클릭", function(){ 을 통해 }); $('#delAll').click(function(){ $('#btn').unbind("클릭"); }); })

$('#btn').unbind("click") 이 코드의 기능은 btn 요소 아래의 클릭 이벤트를 취소하는 것입니다. 이는 바인딩() 메서드에만 유효하지 않고 click() 메서드에도 유효합니다. 특정 관점에서 보면, 바인딩("click",function(){})과 click(function(){})은 동일합니다.

특정 방법으로 특정 이벤트를 삭제할 수도 있습니다. 다음 코드를 참조할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $('#btn').bind("클릭", myFun1 = function(){ 을 통해 }).bind("클릭", myFun2 = function(){ 을 통해 }).bind("클릭", myFun3 = function(){ 을 통해 }); $('#delTwo').click(function(){ $('#btn').unbind("click",myFun2); }); })

unbind() 메소드의 두 번째 매개변수는 해당 이벤트에 해당하는 실행 함수의 이름입니다. 실행 후 myFun2 이벤트만 삭제되고 나머지 두 개의 클릭 이벤트는 정상적으로 실행됩니다. bind() 메서드와 유사한 one() 메서드도 있는데, one() 메서드는 한 번만 실행된다는 점이 다릅니다. 일치하는 각 요소에 대해 일회성 이벤트 핸들러를 특정 이벤트(예: 클릭)에 바인딩합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $(함수(){ $('#btn').one("클릭", function(){ 을 통해 }).one("클릭", function(){ 을 통해 }).one("클릭", function(){ 을 통해 }); })

클릭 후 한 번만 실행됩니다. 다시 클릭하면 효과가 발동되지 않습니다. 이것이 유일한 방법입니다.

위 내용은 이 글의 전체 내용입니다. 이 글이 모든 분들이 jQuery의 바인딩 이벤트와 제거 이벤트를 더 잘 이해하는 데 도움이 되기를 바랍니다.