제 4회 DGMIT R&D 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표

제 4회 R&D
컨퍼런스 개인
프로젝트 발표
2014. 10. 28
Version : 1.0.0
made by 신혜미
R&D 2팀

2
CONTENT
S.
1. 정의……………… 3
2. 차이점 …………… 4
3. 예제 ……………… 6
4. 정리 ……………… 8

3
1. 정의
Mouseover & Mouseenter
• onmouseover & onmouseenter 정의
마우스 포인터가 엘리먼트 위에 위치했을 때
이벤트 발생
• 사용법
 In HTML :
<element onmouseover =“script”>
 In JavaScript :
Object.onmouseover = function(){script};
 In JavaScript, using the addEventListener() method :
object.addEventListener("mouseenter", script);

4
2. 차이점
Mouseover vs Mouseenter
• mouseover
- Element의 Children까지 이벤트 발생
- Browser Support
- Technical Details
Broswer Chrome IE Firefox Safari Opera
onmouseover Yes Yes Yes Yes Yes
Event type MouseEvent
Supported HTML tags All HTML elements, EXCEPT:
<base>, <bdo>, <br>, <head>,
<html>, <iframe>, <meta>,
<param>, <script>, <style>, and
<title>

5
2. 차이점
• mouseenter
- 해당 Element에만 이벤트 발생
- Browser Support
- Technical Details
Broswer Chrome IE Firefox Safari Opera
onmouseover 30.0 5.5 Yes 6.1 11.5
Event type MouseEvent
Supported HTML tags All HTML elements, EXCEPT:
<base>, <bdo>, <br>, <head>,
<html>, <iframe>, <meta>,
<param>, <script>, <style>, and
<title>

6
3. 예제
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>onmouseover and onmouseenter Test</h3>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>
<script>
var x = 0;
var y = 0;
function myEnterFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}
function myOverFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
</body>
</html>

7
3. 예제
<마우스 포인터를 흰색 박스에 위치 시켰을 때>
<기본 UI>

8
4. 정리
• onmouseover와 onmouseenter의 차이점은 자식 elements에게도
이벤트가 발생하는지의 여부
• onmouseover의 경우 자식 수에 따라서 같은 함수가 여러 번 호출
될 수 있음
• 이벤트의 목적에 맞게 onmouseover와 onmouseenter를 구분하여
사용할 필요가 있음

제 4회 DGMIT R&D 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to 제 4회 DGMIT R&D 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표

Similar to 제 4회 DGMIT R&D 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표 (20)

More from dgmit2009

More from dgmit2009 (20)

제 4회 DGMIT R&D 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표