jquery: 호버 이벤트 취소 및 바인딩을 위한 구현 코드

아래 편집기는 jquery에서 hoverevent를 취소하고 바인딩하기 위한 구현 코드를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터를 따라가 보겠습니다

웹 디자인에서 우리는 jquery를 사용하여 마우스 호버 이벤트에 응답하는 경우가 많습니다. 이는 mouseover 및 mouseout 이벤트와 동일한 효과를 가지는데, hover 메서드를 바인딩하기 위해 바인딩을 사용하는 방법은 무엇입니까? 바인딩 해제를 사용하여 이벤트 바인딩을 해제하는 방법은 무엇입니까?

1. hover 이벤트를 바인딩하는 방법

먼저 다음 코드를 살펴보세요. 클릭 및 hover 이벤트를 a 태그에 바인딩한다고 가정해 보겠습니다.

$(document).ready(function(){
  $('a').bind({
    hover: function(e) {
      // Hover event handler
      alert("hover");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

a 태그를 클릭하면 이상한 일이 발생합니다. 그중 바운드 호버 이벤트는 전혀 응답하지 않지만 바운드 클릭 이벤트는 정상적으로 응답합니다.

하지만 다음과 같이 다른 방식으로 작성하면

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

이 코드는 정상적으로 실행될 수 있습니다. 바인드 호버를 바인딩할 수 없나요?

사실 아니요, 대신 mouseenter와 mouseleave라는 두 이벤트(.hover() 함수에서 사용되는 이벤트이기도 함)를 사용해야 합니다. 이렇게 하면 직접 인용할 수 있습니다. :

$(document).ready(function(){
  $('a').bind({
    mouseenter: function(e) {
      // Hover event handler
      alert("mouseover");
    },
    mouseleave: function(e) {
      // Hover event handler
      alert("mouseout");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

.hover( )는 jQuery 자체에서 정의한 이벤트로, 단지 사용자의 편의를 위해 mouseenter 및 mouseleave 이벤트를 바인딩하고 호출하는 것입니다. 실제 이벤트가 아니므로 .bind에서 이벤트 매개변수로 호출할 수는 없습니다. ().

2. hover 이벤트를 취소하는 방법

unbind 기능을 사용하여 바인딩된 이벤트만 취소할 수 있다는 것은 누구나 알고 있지만 jquery의 hover 이벤트는 매우 특별합니다. 이러한 방식으로 바인딩된 이벤트는 취소할 수 없습니다.

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

바운드 hover 이벤트를 취소하는 올바른 방법:

$('a').unbind('mouseenter').unbind('mouseleave');

3. 요약

사실 이러한 문제에 대해서는 jquery 공식 문서를 참조할 수 있지만 온라인에서 읽어본 사람은 거의 없습니다. 대부분의 튜토리얼에서는 이 방법을 사용하는 방법만 설명하고 왜 이런 식으로 작성되었는지에 대한 심층적인 이해를 제공하지 않고 목표만 달성합니다.

궁금한 점은 댓글로 남겨주세요.

위 내용은 jquery: 호버 이벤트 취소 및 바인딩을 위한 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!