• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - mouseenter 이벤트 (= onmouseenter 속성) ★ - 마우스포인터 요소안 이동 (= 마우스허버 = 허버이벤트 = 마우스진입 = 마우스들어가기 = 마우스엔터이벤트)

mouseenter 예제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> 

 

결과보기


 

mouseenter 예제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>

 

결과보기

 

 

mouseenter 정의

 

사용자가 마우스커서를 요소 위에 올릴 때 실행.

 


 

1.

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

 

2.

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

onmouseenter : 자식요소로 이벤트확산 X

onmouseover  : 자식요소로 이벤트확산 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 

 

 

 

mouseenter 구문

 

<element onmouseenter="homzzang()">

 


 

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

 



object.addEventListener("mouseenter", homzzang);

 

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

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

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

 

onmousemove , onmouseenter , onmouseover 차이점

 

<style>

div {

  width: 150px;

  height: 100px;

  border: 0px solid black;

  margin: 10px;

  padding: 30px 10px;

  text-align: center;

  background-color: tomato;

}


p {

  background-color: ivory;

  padding:10px;

}

</style>


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

<div onmousemove="onMouseMove()">

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

</div>

<hr>

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

<div onmouseenter="MouseEnter()">

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

</div>

<hr>

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

<div onmouseover="nMouseOver()">

  <p>onmouseover <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 onMouseEnter() {

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

}


function onMouseOver() {

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

}

</script>

 

결과보기


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

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