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