onmouseenter 이벤트
예시
마우스 포인터를 이미지로 이동할 때 JavaScript를 실행합니다.
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
onmouseenter 이벤트는 마우스 포인터가 요소 위로 이동할 때 발생합니다.
팁: 이 이벤트는 종종 마우스 포인터가 요소 밖으로 이동할 때 발생 하는 onmouseleave 이벤트 와 함께 사용됩니다 .
팁: onmouseenter 이벤트는 onmouseover 이벤트와 유사합니다. 유일한 차이점은 onmouseenter 이벤트가 버블링되지 않는다는 것입니다(문서 계층 구조 위로 전파되지 않음). 차이점을 더 잘 이해하려면 이 페이지 하단의 "추가 예"를 참조하십시오.
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Event | |||||
---|---|---|---|---|---|
onmouseenter | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
통사론
HTML:
<element onmouseenter="myScript">
자바스크립트:
object.onmouseenter = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("mouseenter", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 아니 |
---|---|
취소 가능: | 아니 |
이벤트 유형: | 마우스 이벤트 |
지원되는 HTML 태그: | <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>을 제외한 모든 HTML 요소 |
DOM 버전: | 레벨 2 이벤트 |
더 많은 예
예시
이 예는 onmousemove, onmouseenter 및 mouseover 이벤트 간의 차이점을 보여줍니다.
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>