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

나는이 <ul>초기 페이지로드 후 자바 스크립트로 채워된다. 현재 .bind와 함께 사용 mouseover하고 mouseout있습니다.

프로젝트가 방금 jQuery 1.7로 업데이트되었으므로 사용할 수있는 옵션이 .on있지만 사용할 수없는 것 같습니다 hover. .on와 함께 사용할 수 hover있습니까?

편집 : 바인딩 할 요소는 문서가로드 된 후 자바 스크립트로로드됩니다. 그래서 내가 on아닌 내가 사용하는 이유 hover입니다.

( 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
});

문서가 준비된 후이 선택기를 사용하여 객체를 호출 할 수 있도록 함수를 선택기에 바인딩합니다.

나머지 Javascript의 모양이 확실하지 않으므로 간섭이 있는지 알 수 없습니다. 그러나 .hover()와의 이벤트로 잘 작동합니다 .on().

$("#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");
  }
});

http://jsfiddle.net/hmUPP/2/

jQuery 호버 기능은 마우스 오버 및 마우스 아웃 기능을 제공합니다.

$ (selector) .hover (inFunction, outFunction);

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

출처 : http://www.w3schools.com/jquery/event_hover.asp

그냥 웹에서 서핑을하고 내가 기여할 수 있다고 느꼈습니다. @calethebrewer가 게시 한 위의 코드를 사용하면 선택기를 통해 여러 번 호출되고 예기치 않은 동작이 발생할 수 있습니다.

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

이 바이올린 http://jsfiddle.net/TWskH/12/ 내 요점을 설명합니다. 플러그인과 같은 요소에 애니메이션을 적용 할 때 이러한 여러 트리거로 인해 의도하지 않은 동작이 발생하여 애니메이션이나 코드가 필요 이상으로 호출 될 수 있습니다.

내 제안은 단순히 mouseenter / mouseleave로 대체하는 것입니다.

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

이렇게하면 애니메이션의 여러 인스턴스가 호출되는 것을 막을 수 있었지만 결국 부모의 자식이 언제 마우스를 가져 가는지 결정하기 위해 마우스 오버 / 마우스 레이브를 사용했습니다.

추가 메모 섹션의 내용을 수행 하여 .on()함께 사용할 수 있습니다 hover.

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

다음을 수행해야합니다.

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

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

});

편집 (jQuery 1.8 이상 사용자를위한 참고 사항) :

jQuery 1.8에서 더 이상 사용되지 않으며 1.9에서 제거되었습니다. "호버"라는 이름은 "mouseenter mouseleave"라는 문자열의 약자로 사용되었습니다. 이 두 이벤트에 대해 단일 이벤트 처리기를 연결하고 처리기는 event.type을 검사하여 이벤트가 마우스 입력인지 마우스 이동인지 확인해야합니다. "호버"의사 이벤트 이름을 .hover () 메소드와 혼동하지 마십시오.이 메소드는 하나 또는 두 개의 함수를 허용합니다.

$("#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');

공백으로 구분 된 하나 이상의 이벤트 유형을 제공 할 수 있습니다.

따라서 hover같습니다 mouseenter mouseleave.

이것이 나의 susussion입니다.

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

다른 이벤트에서 조건으로 사용해야하는 경우 다음과 같이 해결했습니다.

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

그런 다음 다른 경우에는 쉽게 사용할 수 있습니다.

 if ($(this).data('hover')){
      //...
 }

( is(':hover')이 문제를 해결하는 데 사용 하는 방법이 있습니다. 그러나 이것은 유효한 jQuery 선택기가 아니며 모든 호환되는 브라우저에서 작동하지는 않습니다)

jQuery 플러그인 hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html 은 여기에 나열된 순진한 접근 방식보다 훨씬 뛰어 납니다. 그들은 확실히 작동하지만, 사용자가 기대하는 방식으로 행동 할 필요는 없습니다.

hoverIntent를 사용하는 가장 강력한 이유는 시간 종료 기능입니다. 사용자가 원하는 항목을 클릭하기 전에 마우스를 오른쪽이나 왼쪽으로 약간 너무 끌어서 메뉴가 닫히는 것을 방지하는 등의 작업을 수행 할 수 있습니다. 또한 사격에서 호버 이벤트를 활성화하지 않는 기능을 제공하고 집중 호버링을 기다립니다.

사용 예 :

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

이에 대한 자세한 설명은 https://stackoverflow.com/a/1089381/37055 를 참조하십시오.