JQuery의 바인딩 이벤트(bind()) 및 제거 이벤트(unbind())에 대해 알아봅니다.-JS 튜토리얼-php.cn

JQuery의 바인딩 이벤트(bind()) 및 제거 이벤트(unbind())에 대해 알아봅니다.

巴扎黑

풀어 주다： 2017-06-25 14:50:57

원래의

1884명이 탐색했습니다.

이 글은 주로 jQuery의 바인딩 이벤트 및 제거 이벤트의 사용법과 예시 공유를 자세히 소개합니다. 도움이 필요한 친구들이 참고할 수 있도록 추천합니다.

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

예를 들어 다음과 같은 경우입니다.

코드는 다음과 같습니다.

<script type="text/
javascript
">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

로그인 후 복사

html 부분:

코드는 다음과 같습니다.

<body>
    <button id="btn">Click Me</button>
    <p id="test"></p>
</body>

로그인 후 복사

버튼을 클릭하면 3개의 클릭 이벤트가 발생합니다. ) 여기서 메소드는 p 레이어로 이동하여 세 단락의 내용이 전달됩니다.

append() 메서드는 지정된 내용을 선택한 요소의 끝에(여전히 내부에 있음) 추가합니다. html() 메서드와는 여전히 다릅니다. html() 메서드는 요소 끝에 내용을 추가하는 대신 전체 요소의 내용을 변경합니다. text() 메서드는 html() 메서드와 유사하지만 차이점은 html 코드를 html() 메서드로 작성할 수 있고 올바르게 구문 분석할 수 있는 반면, text()는 html 코드를 일반 코드로만 처리할 수 있다는 것입니다. 문자열.

여기를 클릭할 때마다 이벤트가 실행되는데, p 레이어 끝에 문단을 추가하고 싶습니다. 다음 코드는 사건의 효과를 취소하는 것입니다.

이벤트를 삭제하여 클릭 효과를 실패하게 만들 수 있습니다. 코드는 다음과 같습니다:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delAll&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click");
       });
    })
</script>

로그인 후 복사

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

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

코드는 다음과 같습니다.

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", myFun1 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delTwo&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click",myFun2);
       });
    })
</script>

로그인 후 복사

unbind() 메소드의 두 번째 매개변수는 해당 이벤트에 해당하는 실행 함수 이름이며, 실행 후에는 myFun2 이벤트만 삭제됩니다. 나머지 두 개의 클릭 이벤트는 정상적으로 실행됩니다.

bind() 메서드와 유사한 one() 메서드도 있는데, 차이점은 one() 메서드가 한 번만 실행된다는 점일 것입니다. 일회성

이벤트 핸들러

함수를 일치하는 요소의 각 특정 이벤트(예: 클릭)에 바인딩합니다. 코드는 다음과 같습니다. 코드는 다음과 같습니다.

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

로그인 후 복사

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

위 내용은 JQuery의 바인딩 이벤트(bind()) 및 제거 이벤트(unbind())에 대해 알아봅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!