• 회원가입
  • 로그인

[DOM_Event] JS - mouseleave 이벤트 (= onmouseleave 속성) ★ - 마우스포인터 요소밖 이동 (= 마우스이탈 = 마우스나가기 = 마우스리브이벤트)

mouseleave 예제1 - 색깔변경

 

<p id="hz" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()"> 홈짱닷컴 Homzzang.com</p>


<script>

function mouseEnter() {

  document.getElementById("hz").style.color = "red";

}


function mouseLeave() {

  document.getElementById("hz").style.color = "blue";

}

</script> 

 

결과보기


 

mouseleave 예제2 - 이미지크기변경

 

<img onmouseenter="onMouseEnter(this)" onmouseleave="onMouseLeave(this)" border="0" src="https://source.unsplash.com/random" alt="랜덤이미지" width="150" height="auto">


<script>

function onMouseEnter(x) {

  x.style.height = "auto";

  x.style.width = "200px";

}


function onMouseLeave(x) {

  x.style.height = "auto";

  x.style.width = "150px";

}

</script>

 

결과보기

 

 

mouseleave 정의

 

마우스포인터가 요소 밖으로 이동하면 발생.

 


 

1.

onmouseenter 이벤트와 주로 함게 사용..

 

2.

유사이벤트와 차이점. (맨 아래 예제 참고)
onmousemove : 자식요소로 이벤트확산 O
onmouseleave : 자식요소로 이벤트확산 X
onmouseout : 자식요소로 이벤트확산 O

 

3.

IE5.5 이상 모든 브라우저 지원.

 

4.

이벤트확산 : X
취소가능성 : X

이벤트타입 : MouseEvent

지원 HTML : 모든 HTML 요소, (예외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>)

DOM 버전 : Level 2 Events 

 

 

 

mouseleave 구문

 

<element onmouseleave ="homzzang()">

 


 

object.onmouseleave = function(){homzzang()};

 



object.addEventListener("mouseleave", homzzang);

 

※ homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)

※ addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)

※ addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.  

 

 

onmousemove , onmouseleave , onmouseout 차이점

 

<style>

div {

  width: 150px;

  height: 100px;

  border: 0px solid black;

  margin: 10px;

  padding: 30px 10px;

  text-align: center;

  background-color: blue;

}


p {

  background-color: ivory;

  padding:10px;

}

</style>


마우스포인터가 div 요소 위에서 움직일 때마다 발생

<div onmousemove="onMouseMove()">

  <p>onmousemove <br> <span id="demo1"></span></p>

</div>

<hr>

마우스포인터가 안에서 div 요소 밖으로 나갈 때만 발생

<div onmouseleave="onMouseLeave()">

  <p>onmouseleave <br> <span id="demo2"></span></p>

</div>

<hr>

마우스포인터가 div 및 해당 하위요소 (p 및 span)에서 나갈 때도 발생.

<div onmouseout="onMouseOut()">

  <p>onmouseout <br> <span id="demo3"></span></p>

</div>


<script>

var x = 0;

var y = 0;

var z = 0;


function onMouseMove() {

  document.getElementById("demo1").innerHTML = z+=1;

}


function onMouseLeave() {

  document.getElementById("demo2").innerHTML = x+=1;

}


function onMouseOut() {

  document.getElementById("demo3").innerHTML = y+=1;

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012