[참고] http://www.w3schools.com/js/js_events.asp
HTML이벤트는 HTML요소에서 발생할 수 있는 상황이다.
자바스크립트가 HTML페이지에서 사용될 때, 자바스크립트는 이런 이벤트에 반응한다.
HTML Events(HTML 이벤트)
HTML 이벤트는 브라우저나 사용자가 행하는 어떤 것이 될 수 있다.
아래는 HTML 이벤트의 예제들이다.
- HTML 웹페이지 로딩이 끝났을때
- HTML 입력 필드가 변경됬을 때
- HTML 버튼이 클릭됐을 때
종종 이벤트가 발생할 떄, 당신은 뭔가 하고싶을지도 모른다.
자바스크립트는 이벤트가 감지됐을 때 코드가 실행되도록 한다.
HTML은 자바스크립트 코드와 함께 이벤트 핸들러 속성이 HTML 코드에 추가되도록 해준다.
With single quotes:
<some-HTML-element some-event='some JavaScript'>
With double quotes:
<some-HTML-element some-event="some JavaScript">
다음 예에서, onclick 속성은(코드포함) 버튼요소에 추가된다.
Example
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Try it Yourself »
위 예에서, 자바스크립트 코드는 id가 demo인 것의 내용을 바꾼다.
다음 예에서, 코드는 자신의 요소의 내용을 바꾼다.
In the next example, the code changes the content of it's own element (this.innerHTML 사용):
 | 자바스크립트 코드는 종종 긴 라인 수를 가진다. 이는 함수를 호출하는 이벤트 속성을 볼일이 더 많다는 것이다. |
|---|
Common HTML Events
이것은 몇 일반적인 HTML 이벤트 목록이다.
| Event | Description |
|---|---|
| onchange | HTML요소가 변결될 때 An HTML element has been changed |
| onclick | 사용자가 HTML 요소를 클릭할 때 The user clicks an HTML element |
| onmouseover | 사용자가 HTML요소에 마우스를 올렸을 때 The user moves the mouse over an HTML element |
| onmouseout | 사용자가 HTML 요소에서 마우스를 멀리했을 때 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?(자바스크립트가 할 수 있는 것?)
이벤트 핸들러는 사용자 입력, 사용자 동작, 브라우저 동작을 다루거나 확인하는데 사용될 수 있다.
- 페이지 로드마다 수행되어야 하는 것
- 페이지가 닫힐 때 수행되어야 하는 것
- 사용자가 버튼을 클릭했을 때 수행되어야 할 동작
- 사용자가 데이터를 입력했을 때 확인되어야 할 내용
- 등 ...
여러가지 메소드는, 자바스크립트가 이벤트와 같이 작동하도록 사용될 수 있다.
- HTML 이벤트 속성은 자바스크립트 코드를 직접 실행할 수 있다.
- HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있다.
- 자신의 이벤트 핸들러 기능을 HTML 요소에 할당할 수 있다.
- 이벤트가 전송되거나 처리되는 것을 막을 수 있다.
- 등 ...
| You will learn a lot more about events and event handlers in the HTML DOM chapters. |
|---|
댓글 없음:
댓글 쓰기