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
이벤트타입 : 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>
결과보기
