JavaScript Events
HTML 이벤트(events)는 HTML 요소에서 일어난 "무엇(things)" 들이다.
HTML 페이지에서 JavaScript 가 사용될 때, JavaScript 는 이러한 이벤트들에 "반응(react)" 할 수 있다.
HTML Events
HTML 이벤트(event)는 브라우저가 하는 무엇이거나, 사용자가 하는 무엇일 수 있다.
HTML 이벤트의 몇가지 예:
- HTML 웹페이지 로딩 완료
- HTML 입력필드(input field) 변경
- HTML 버튼을 클릭
이벤트가 발생하면, 당신은 종종 우언가를 할 수 있다.
JavaScript는 이벤트가 발생했을 때 코드를 실행하도록 해준다.
HTML 은 이벤트 핸들러 속성(event handler attributes)을, JavaScript 코드로, HTML 요소에 추가할 수 있게 해준다.
작은 따옴표로:
<some-HTML-element some-event='some
JavaScript'>
큰 따옴표로:
<some-HTML-element some-event="some
JavaScript">
다음 예에서는, onclick 속성이 (코드와 함께) button 요소에 추가되었다.:
Example
<button
onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Try it Yourself » 위의 예에서, JavaScript 코드는 id="demo"인 요소의 내용을 변경한다..
다음 예에서는, code 가 (this.innerHTML를 사용하여) 그 자신의 요소의 내용을 변경한다:
 |
JavaScript 코드는 종종 여러 줄일 수 있다. 이 때는 이벤트 속성이 함수를 호출하도록 하는 것이 보통이다. : |
|---|
Common HTML Events
일반적인 HTML events 목록:
| 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 |
The list is much longer: W3Schools JavaScript Reference HTML DOM Events.
What can JavaScript Do?
이벤트 핸들러(Event handlers)는 사용자 입력/행동/브라우져 동작들을 처리하고 확인하는데 사용될 수 있다. :
- 페이지가 로드 될 때 마다 실행 되어야 할 것들
- 페이지를 닫을 때 실행되어야 할 것들
- 사용자다 버튼을 클릭할 때 수행되어야 할 행동
- 사용자 데이터 입력시 내용을 확인해야 할 때
- And more ...
- HTML 이벤트 속성이 JavaScript 코드를 직접 실행
- HTML 이벤트 속성이 JavaScript 함수를 호출
- 당신 자신의 이벤트 핸들러 함수를 HTML 요소에 할당
- 이벤트가 보내지거나 처리되는 것을 방지
- And more ...
|
You will learn a lot more about events and event handlers in the HTML DOM chapters. |
|---|
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »