jQuery에서 호버 이벤트를 바인딩하고 취소하는 방법(코드 첨부)

이 글에서는 주로 바인드를 사용하여 호버 메소드를 바인딩하는 방법과 바인딩된 이벤트를 취소하기 위해 언바인드를 사용하는 방법에 대해 설명합니다. 여기에는 특정 참조 값이 있으며 필요하면 살펴볼 수 있습니다.

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

1. 호버 이벤트 바인딩 방법

먼저 클릭 및 호버 이벤트를 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. 호버 이벤트 취소 방법

우리 모두 알고 있듯이 바인딩된 이벤트를 취소하려면 unbind 기능을 사용할 수 있지만 바인딩된 이벤트와 jquery의 hover 이벤트는 매우 특별합니다. 바인딩된 이벤트가 이런 방식으로 바인딩되면 취소할 수 없습니다.

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

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

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

3 요약

#🎜🎜 #사실 이러한 질문에 대해서는 jquery 공식 문서를 참조할 수 있지만, 인터넷에 있는 대부분의 튜토리얼에서는 이 방법을 사용하는 방법만 설명하고 목적을 달성하는 방법에 대한 심층적인 이해가 없습니다. 이렇게 쓰여있나요? 궁금한 점이 있으시면 댓글을 남겨주세요.

위 내용은 jQuery에서 호버 이벤트를 바인딩하고 취소하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!