반응형
자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.
이번에는 자바스크립트 이벤트에 대해 알아보려 한다.
HTML에서 어떠한 이벤트를 일으킬 때 자바스크립트를 사용하여 이벤트를 감지하여 코드를 실행할 수 있다.
이때 말하는 HTML에서의 이벤트는 브라우저가 수행하거나, 사용자가 수행하는 작업들이다.
ex) 웹 페이지 로드 완료될 때, 입력폼에 값을 넣었을 때, 버튼을 클릭했을 때 등등..
| Event | Description |
|---|---|
| onchange | An HTML element has been changed |
| onclick | The user clicks an HTML element |
| onmouseover | The user moves the mouse over an HTML element |
| onmouseout | The user moves the mouse away from an HTML element |
| onkeydown | The user pushes a keyboard key |
| onload | The browser has finished loading the page |
위와 같은 종류의 대표적인 이벤트를 이용하여 코드를 연습해보자.
더 많은 이벤트를 확인해보기 위해서는 아래 사이트를 이용한다.
https://www.w3schools.com/jsref/dom_obj_event.asp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <title>test title</title> </head> <body> <h2> JavaScript </h2> <button type="button" onclick="getTime1()"><< 현재 시각 >></button> <p id="test"></p> <button type="button" onmouseover="getTime2(this)" onmouseout="getTime3(this)"><< 현재 시각 >></button> <script> function getTime1() { document.getElementById("test").innerHTML = Date(); } function getTime2(handle) { handle.innerHTML = Date(); } function getTime3(handle) { handle.innerHTML = "<< 현재 시각 >>"; } </script> </body> </html> // This source code Copyright belongs to Crocus // If you want to see more? click here >> | Crocus |
위 코드는 Date() 메서드를 이용한 현재 시각을 나타내는 방법이다.
버튼을 클릭하면 그 클릭을 감지하여 자바스크립트 코드를 실행한다는 것을 알 수 있다.
반응형
'Basic > JavaScript' 카테고리의 다른 글
| 자바스크립트 DOM(Document Object Model) (0) | 2017.09.23 |
|---|---|
| 자바스크립트 스트링 메서드 (0) | 2017.09.22 |
| 자바스크립트 Number 메서드 (0) | 2017.09.20 |
| 자바스크립트 null과 undefined차이 (0) | 2017.09.20 |
| 자바스크립트 연산자 우선순위 (0) | 2017.09.19 |