목차
- mouseleave 예제 - 색깔 변경
- mouseleave 예제 - 이미지크기 변경
- mouseleave 정의
- mouseleave 구문
- (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. (맨 아래 예제 참고)
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>
결과보기
