<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<title>Event Handling</title>
<style type = "text/css">
#boardContainer
{
height: 300px;
border: 5px solid black;
}
#keyboardEventDiv
{
border: 5px solid black;
}
</style>
</head>
<body>
<div id = "11-0_EventHandling" style ="border: 1px solid black">
<p >
이벤트 <br/>
이벤트 객체는 웹애플리케이션에 변화가 생길 때 생성된다.<br/>
문서의 모든 변화와 활통에 대해 이벤트가 발생되며 이 이벤트에 대해 자바스크립트는 이벤트 객체를 생성한다.<br/>
특정한 이벤트에 대한 응답을 설정하거나 해제하는 행위를 "이벤트를 핸들링한다."라고 한다.<br/>
이러한 이벤트 처리에 대해 응답으로 반응하는 함수를 리스너라고 한다.<br/>
</p>
<p >
이벤트 전파<br/>
1. 버블링방식 <br/>
버블링 방식은 이벤트를 일으킨 요소를 가장 먼저 확인한다.<br/>
그 후에 부모요소를 확인하고 다시 부모요소를 확인해 나가며 마지막으로 html 엘리먼트를 확인한다.<br/>
2. 캡처링방식 <br/>
캡처링 방식은 가장 먼저 html 엘리먼트를 확인한다. <br/>
그 후의 자식요소를 확인하고 다시 자식요소를 확인해 나가며 마지막 자식요소를 확인한다.<br/>
마지막 자식요소를 확인하면 형제요소를 확인하며 이 과정을 이벤트가 일어난 요소를 찾을때 까지 반복한다. <br/>
</p>
</div><br/>
<div id ="11-1_EventAttr" style ="border: 1px solid black">
<h3>이벤트 속성 예제</h3>
<script type="text/javascript" src = "11-1_EventAttr.js"></script>
<button type = 'button'>Click</button><div>Click interval : <span id = "msContent">0</span> ms</div><br/>
</div><br/>
<div id ="11-2_MouseEvent" style ="border: 1px solid black">
<h3>MouseEvent</h3>
<script type="text/javascript" src = "11-2_MouseEvent.js"></script>
<div id = "boardContainer"></div>
</div><br/>
<div id = "11-3_KeyboardEvent">
<h3>KeyboardEvent</h3>
<script type = "text/javascript" src = "11-3_KeyboardEvent.js"></script>
<div id = "keyboardEventDiv">
<button type = "button" onclick = "setOnlyNum();">숫자만 입력받기</button>
<button type = "button" onclick = "resetOnlyNum();">숫자만 입력받기 해제</button><br/>
<input type = "text" name = "number" id = "numberInput"/><br/>
입력받은 키코드 : <span id = "insertedKeyCode"></span>
</div>
</div>
</body>
</html>
11-0_EventHandling.html'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 11-2_MouseEvent.js (0) | 2016.12.08 |
|---|---|
| [JavaScript] 11-1_EventAttr.js (0) | 2016.12.08 |
| [JavaScript] 7-8_modifyContent.js (0) | 2016.12.08 |
| [JavaScript] 7-7_attrObj.js (0) | 2016.12.08 |
| [JavaScript] 7-6_referencedObj.js (0) | 2016.12.08 |