제 4회 dgmit r&d 컨퍼런스 : 컨퍼런스 개인 프로젝트 발표
DESCRIPTION
1.정의 2.차이점 3.예제 4.정리TRANSCRIPT
제 4회 R&D 컨퍼런스 개인 프로젝트 발표
2014. 10. 28
Version : 1.0.0
made by 신혜미 R&D 2팀
2
CONTENTS. 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. 차이점 Mouseover vs Mouseenter
• 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. 예제 Mouseover vs Mouseenter
<!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. 예제 Mouseover vs Mouseenter
<마우스 포인터를 흰색 박스에 위치 시켰을 때>
<기본 UI>
8
4. 정리
• onmouseover와 onmouseenter의 차이점은 자식 elements에게도 이벤트가 발생하는지의 여부
• onmouseover의 경우 자식 수에 따라서 같은 함수가 여러 번 호출 될 수 있음
• 이벤트의 목적에 맞게 onmouseover와 onmouseenter를 구분하여 사용할 필요가 있음
9