mouseover () 및 hover () 함수를 언제 선택해야합니까?


112

jQuery .mouseover().hover()함수 의 차이점은 무엇입니까 ? 그들이 완전히 동일하다면 왜 jQuery가 둘 다 사용합니까?


4
중복 된 질문이 아닙니다. 제공된 링크에는 mouseover 및 mouseenter 이벤트가 있지만 내 것은 mouseover 및 hover 이벤트입니다.
Bhojendra Rauniyar

1
그들은 마우스 오버 사려고하는 MouseLeave 아래의 허용 대답은 정확하지 않습니다와 같은 다른입니다 ... 호버 기능은 mouseenter 및 mouseleve 행사하지 마우스 오버와로 마우스 이벤트 추가
아룬 P Johny는

1
참조 jsfiddle.net/arunpjohny/cZb5b/1는 으로부터 마우스를 이동 el에 요소 child및 콘솔 확인
아룬 P Johny는

@ArunPJohny 다시 읽으십시오. 마우스 오버와 마우스 아웃이 아닌 mouseenter 및 mouseleave입니다.
Bhojendra Rauniyar

1
또한 호버로 - jsfiddle.net/arunpjohny/cZb5b/2 콘솔을 분석 할 수 있다면, 당신은 ... 그 차이를 찾을 수 있습니다
아룬 P Johny는

답변:


113

공식 jQuery 문서에서

  • .mouseover()
    이벤트 핸들러를 "mouseover"JavaScript 이벤트에 바인딩하거나 요소에서 해당 이벤트를 트리거하십시오.

  • .hover() 하나 또는 두 개의 핸들러를 일치하는 요소에 바인딩하여 마우스 포인터 요소에 들어 오고 나갈 때 실행 되도록합니다.

    호출 $(selector).hover(handlerIn, handlerOut)은 다음의 약칭입니다. $(selector).mouseenter(handlerIn).mouseleave(handlerOut);


  • .mouseenter()

    마우스가 요소에 들어갈 때 시작될 이벤트 핸들러를 바인딩하거나 요소에서 해당 핸들러를 트리거합니다.

    mouseover포인터가 자식 요소로 mouseenter이동할 때도 발생하고 포인터가 바인딩 된 요소로 이동할 때만 발생합니다.


이게 무슨 뜻이야

이 때문에, .mouseover()하지 같은 .hover()동일한 이유에 대해, .mouseover()이다 하지 동일 .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function) 

31

.hover()function은 두 개의 함수 인수를받습니다. 하나는 mouseenter이벤트 용이고 다른 하나는 mouseleave이벤트 용입니다.


이것은 질문 제목 인 감사합니다!에 언급 된 두 기능의 차이점이라는 점에서 좋은 점입니다. .hover () 작동 방식에 대해서는 아래 w3schools 링크를 확인하십시오. w3schools.com/jquery/event_hover.asp
Bahman.A

8

jQuery 문서 페이지 에서 http://api.jquery.com/mouseover/ 를 사용해 볼 수 있습니다 . 매우 명확하고 실제로 직접 볼 수있는 멋진 대화 형 데모입니다.

간단히 말해, 마우스 오버 이벤트는 요소 위에있을 때 자식 또는 부모 요소에서 발생하지만 마우스 입력 이벤트는 마우스가 부모 요소에서 요소로 이동할 때만 발생합니다.


1

공식 문서에서 : ( http://api.jquery.com/hover/ )

.hover () 메서드는 mouseenter 및 mouseleave 이벤트 모두에 대한 핸들러를 바인딩합니다. 마우스가 요소 내에있는 동안 단순히 요소에 동작을 적용하는 데 사용할 수 있습니다.


1

http://api.jquery.com/mouseenter/ 에서 읽을 수 있습니다.

mouseenter JavaScript 이벤트는 Internet Explorer 전용입니다. 이벤트의 일반적인 유틸리티로 인해 jQuery는이 이벤트를 시뮬레이션하여 브라우저에 관계없이 사용할 수 있습니다. 이 이벤트는 마우스 포인터가 요소에 들어갈 때 요소로 전송됩니다. 모든 HTML 요소는이 이벤트를받을 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.