-
[javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:39
JavaScript HTML DOM Events
HTML DOM은 HTML 이벤트의 반응을 자바스크립트에게 허용합니다.
1. Reacting to Events
자바스크립트는 이벤트가 발생할 때 실행되어 질 수 있습니다, 마치 사용자가 HTML 요소를 클릭 했을 때 처럼 말이죠.
사용자가 요소를 클릭 했을 때 코드를 실행시키기 위해, HTML 이벤트 속성에 자바스크립트 코드를 추가해주시면 됩니다.
onclick=JavaScriptHTML 이벤트의 예제:
- 사용자가 마우스로 클릭 했을 때
- 웹 페이지가 로드 되었을 때
- 이미지가 로드 되었을 때
- 마우스가 요소의 위에 올라갔을 때
- 입력 필드가 변경 되었을 때
- HTML 서식이 제출 되었을 때
아래 예제의 텍스트를 클릭하면 텍스트가 바뀝니다:
Click on this Text!
코드:
12<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>cs 2. HTML Event Attributes
이벤트 속성을 사용하여 HTML 요소의 이벤트를 할당 할 수 있습니다.
12345678910111213141516171819<!DOCTYPE html><html><body><p>Click the button to display the date.</p><button onclick="displayDate()">The time is?</button><script>function displayDate() {document.getElementById("demo").innerHTML = Date();}</script><p id="demo"></p></body></html>cs 3. Assign Events Using the HTML DOM
button 요소에 onclick 이벤트를 할당하는 예제입니다:
1234<script>document.getElementById("myBtn").onclick = function(){ displayDate() };</script>cs 4. The onload and onunload Events
onload와 onunload 이벤트는 사용자가 페이지에 들어오거나 나갈 때 발생하는 이벤트 입니다.
onload 이벤트는 방문자의 브라우저 타입이나 브라우저 버전, 정보를 기반으로 웹 페이지의 적당한 버전을 로드를 검사하는데 사용됩니다.
onload 와 onunload 이벤트는 쿠키와 함께 사용 되어 집니다:
12<body onload="checkCookies()">cs 5. The onchange Event
onchange 이벤트는 입력 필드의 검사와 혼합되어 사용됩니다.
아래 예제에서 upperCase() 함수는 입력 필드가 사용자에 의해 변경되어 질 때, 호출됩니다.
123<input type="text" id="fname" onchange="upperCase()">cs 6.The onmouseover and onmouseout Events
onmouseover와 onmouseout 이벤트는 사용자의 마우스가 요소에 올라 갔다가, 나갈 때 발생하는 이벤트입니다.
12345678910111213141516171819202122<!DOCTYPE html><html><body><div onmouseover="mOver(this)" onmouseout="mOut(this)"style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj) {obj.innerHTML = "Thank You"}function mOut(obj) {obj.innerHTML = "Mouse Over Me"}</script></body></html>cs 7. The onmousedown, onmouseup and onclick Events
onmousedown, onmouseup, onclick 이벤트는 마우스 클릭의 모든 부분입니다.
onmousedown은 마우스 버튼이 클릭 되었을 때, 발생합니다.
onmouseup은 마우스 버튼이 클릭 되었다가 풀릴 때, 발생합니다.
'Web > JavaScript' 카테고리의 다른 글
[javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
