jquery hover 이벤트를 취소하고 바인딩하는 올바른 방법에 대한 자세한 설명

웹 디자인에서 우리는 마우스 hover 이벤트에 응답하기 위해 jquery를 자주 사용합니다. 이는 mouseover 및 mouseout 이벤트와 동일한 효과를 가지는데 on을 사용하여 hover 메서드를 바인딩하는 방법은 무엇입니까? 바운드 이벤트를 취소하기 위해 off를 사용하는 방법은 무엇입니까?
1. 호버 이벤트 바인딩 방법
먼저 다음 코드를 살펴보세요. 클릭 및 호버 이벤트를 a 태그에 바인딩한다고 가정해 보겠습니다.

$(document).ready(function(){ $('a').on({ 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'); })

off 함수를 사용하여 바인딩된 이벤트를 취소할 수 있다는 것은 누구나 알고 있지만, jquery의 hover 이벤트는 이 방법을 사용하는 경우 매우 특별합니다. 호버 이벤트를 취소하려면 바운드 이벤트를 취소할 수 없습니다.

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

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