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").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

$(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() 에서 이벤트 매개변수로 호출됩니다.

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

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

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

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

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