[jquery] jQuery .on 및 호버를 사용할 수 있습니까?

( JavaScript로 채워진 요소와 함께 사용해야 .on()하는 경우이 답변의 마지막 편집을보십시오 )

JavaScript를 사용하여 채워지지 않은 요소에이를 사용하십시오.

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()자체 처리기가 있습니다 : http://api.jquery.com/hover/

여러 가지 작업을 수행하려면 .on()다음과 같이 처리기 에 연결하십시오 .

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

아래 제공된 답변에 따르면와 hover함께 사용할 수 .on()있지만 다음 과 같이 사용할 수 있습니다 .

새 코드를 사용하지 않는 것이 좋지만 의사 이벤트 이름 “호버”는 “mouseenter mouseleave”문자열의 속기로 사용됩니다. 이 두 이벤트에 대해 단일 이벤트 처리기를 연결하고 처리기는 event.type을 검사하여 이벤트가 마우스 입력인지 마우스 이동인지 확인해야합니다. “호버”의사 이벤트 이름을 .hover () 메소드와 혼동하지 마십시오.이 메소드는 하나 또는 두 개의 함수를 허용합니다.

또한, 거기를 사용하는 성능에 장점은없고 그냥 사용하는 것보다 더 부피의 mouseenter나 mouseleave. 내가 제공 한 답변은 적은 코드가 필요하며 이와 같은 것을 달성하는 올바른 방법입니다.

편집하다

이 질문에 대한 답을 얻은 지 얼마되지 않아서 약간의 견인력을 얻은 것 같습니다. 위의 코드는 여전히 유효하지만 원래 답변에 무언가를 추가하고 싶었습니다.

내가 사용하는 것을 선호하는 동안 mouseenter과 mouseleave함께 (나를 코드에서 세드릭을 이해하는 데 도움이) .on()그냥 쓰는에 다음과 동일hover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
},
function () {
    //stuff to do on mouse leave
});

원래 질문에 on()와 함께 올바르게 사용하는 방법을 묻었으므로 hover()사용법을 수정 하고 당시 코드 on()를 추가해야 할 필요가 없다고 생각했습니다 hover().

2012 년 12 월 11 일 편집

아래에 제공된 새로운 답변 중 일부 는 JavaScript를 사용하여 문제가있는 .on()경우 어떻게 작동해야하는지 자세히 설명 합니다 div. 예를 들어 다음 과 같이 divjQuery를 사용하여 .load()이벤트 를 채우는 경우 를 가정 해 보겠습니다 .

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

위의 코드는 .on()유효하지 않습니다. 대신 다음과 같이 코드를 약간 수정해야합니다.

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

이 코드는 .load()이벤트가 발생한 후 JavaScript로 채워진 요소에 대해 작동합니다 . 인수를 적절한 선택기로 변경하십시오.

답변

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

$("#foo").on("hover", function() {
  // disco
});

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');