jQuery 관련controls_jquery의 이벤트 연산 분해-JS 튜토리얼-php.cn

오늘 갑자기 그의 사건에 관심이 생겼습니다. 전에 접한 적이 있는데 아직 정리하지 못했습니다. 오늘 시간이 나면 할게요.

jQuery는 바인딩, 일회성 바인딩, 트리거링 등 다양한 방법을 제공합니다. 오늘 아침에 Prawn Lugu가 그 일을 할 수 있는지 살펴보겠습니다.

jQuery의 바인딩 이벤트는 매우 편리하며, 컨트롤의 onclick 이벤트와 같이 일반적으로 사용되는 일부 이벤트를 격리하는 데 도움이 됩니다.

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

 
$("#testButton").click (function( ) { 
alert("I'm Test Button"); 
}); 

이런 방식으로 onclick 이벤트를 testButton 버튼에 바인딩하고 실행합니다. 경고문. $("#testButton").click();을 사용하여 이 onclick 이벤트를 트리거할 수도 있으며 모든 것이 정상입니다. 위 내용이 좀 엉성하니 다음에는 취소 이벤트를 살펴보겠습니다. jQuery에는 바인딩 해제, 즉 이벤트 취소에 특별히 사용되는 바인딩 해제 메서드가 있습니다. 위의 예에 따르면 $("#testButton").unbind("click"); . 클릭 이벤트에 두 개의 이벤트가 있는 경우 unbind("click", fnName)를 사용하여 특정 함수의 바인딩을 삭제할 수도 있습니다. 특정 함수를 취소하는 이 방법이 있는 이유는 무엇입니까? 예제를 살펴보면 JavaScript 이벤트가 C# 이벤트와 완전히 동일하다는 것을 알 수 있습니다. 이벤트 바인딩은 재정의되는 대신 겹쳐집니다.

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

var Eat = function() { 
alert( "먹고 싶어요"); 
} 

var PayMoney = function() { 
alert("결제 먼저") 

jQuery (문서) .ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").bind("click", PayMoney); 
} ); 

위의 예를 통해 "먹고 싶어요"가 먼저 나타난 다음 "Pay first"가 팝업되어 onclick =fn을 통해 바인딩이 수행됨을 나타냅니다. . Ready 메소드를 수정해 봅시다:

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

jQuery( document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").unbind(); 
$("#testButton") .bind( "click", PayMoney) 
});

또 오류가 발생했습니다 ㅎㅎ 이번에도 버튼을 누르면 PayMoney만 실행되고 Eat은 실행되지 않습니다. 그런 다음 unbind()를 바인딩한 후에 배치하면 이 버튼이 작동하지 않습니다. 하지만 바인딩된 PayMoney 메서드를 제거하려면 어떻게 해야 합니까? 이때 다음과 같이 작성해야 합니다.

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

jQuery(문서).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").bind("click", PayMoney); 
$("#testButton ").unbind("click", PayMoney); 
});

실제로는 바인딩과 같지만 다음에는 버그( 계산인지는 모르겠지만, 가까이에서 체험해 보세요

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

무엇이 표시될지 추측해 보세요. 식사하세요? 지불하다? 정답은 Eat -> PayMoney 입니다! ! ! 여기서 바인딩을 취소하고 특정 바인딩을 삭제했는데 왜 Eat이 계속 실행되나요? 그 이유는 jQuery 클래스 라이브러리에 달려 있습니다. JQuery를 통해 바인딩된 이벤트만 삭제하는 것 같아요. 하하. 그렇다면 이때 우리는 무엇을 해야 할까요? 다행스럽게도 jQuery에는 많은 메소드가 있으며 그 중 하나는 Dom 요소의 속성에 대해 작동하는 attr을 사용하여 입력 시 클릭 이벤트를 제거합니다. $("#testButton").attr("onclick", ""); 그러면 onclick 이벤트가 지워집니다. attr은 요소의 속성이므로 여기를 클릭하는 대신 "onclick"을 써야 합니다. jQuery Encapsulation의 약어입니다. 자, 모두가 기억해야 할 장면은 다음과 같습니다. 어느 날, Lao Ying, Lao Zhao, Lao Chen은 배가 불러서 돈을 지불할 준비가 되어 있었습니다.

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

： ="text/javascript" src="jquery-1.2.6.min.js">

저자별 최신 기사