JavaScript

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

목차
  1. mouseleave 예제 - 색깔 변경
  2. mouseleave 예제 - 이미지크기 변경
  3. mouseleave 정의
  4. mouseleave 구문
  5. (mousemove/mouseleave/mouseout) 차이점

 

mouseleave 예제 - 색깔 변경 

 

<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 예제 - 이미지크기 변경

 

<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.

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

 

2. cf. (맨 아래 예제 참고) 

  • mousemove : 자식요소로 이벤트확산 O
  • mouseleave : 자식요소로 이벤트확산 X
  • mouseout : 자식요소로 이벤트확산 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 구문

 

HTML 방식

<element onmouseleave ="homzzang()">

 

JS 방식 (2종류)

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

object.addEventListener("mouseleave", homzzang);

 

PS.

  • homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)
  • addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)
  • addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.

  

(mousemove/mouseleave/mouseout) 차이점

 

<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)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인