* 이벤트
- 마우스 커서를 웹상의 이미지에 올려 놓으면 그 이미지가 바뀌는 일이 있음.
- 이러한 웹 페이지에서는 '마우스 커서가 위에 있다'라는 이벤트를 처리하여 이미지를 바꾸고 있는 것임.
* 이벤트 핸들러
- 이벤트에 반응하여 처리를 수행하려면 이벤트 핸들러를 정의해야 함.
- 예)
|
1
2
3
4
5
6
7
8
9 |
<!DOCTYPE html>
<html>
<head> ... </head>
<body>
<img src="c_1.png"
onmouseover="this.src='c_2.png'"
onmouseout="this.src='c_1.png'"> // 이 요소의 src 속성을 설정함.
</body>
</html> |
cs |
- 이벤트 핸들러의 내용이 안에서 false로 반환되면 (return false) 디폴트로 정의되어 있는 처리가 수행되지 않음.
- 이미지에 마우스 커서를 올려 놓으면 mouseover 이벤트가 발생함.
- 이에 대한 이벤트 핸들러가 onmouseover 이벤트 핸들러.
- 커서를 때면 mouseout 이벤트가 발생하고 onmouseout 이벤트 핸들러가 호출됨.
- this는 자기 자신의 요소 오브젝트를 나타내는 키워드임.
* 이벤트 핸들러의 종류
- 이벤트명은 이벤트 핸들러명에서 on을 떼면 됨.
|
카테고리 |
이벤트 핸들러 |
내용 |
|
페이지 읽기 |
onload |
페이지나 이미지 읽기가 완료됨. |
|
onunload |
창을 닫음, 다른 페이지로 전환함, 페이지가 변경됨. | |
|
onabort |
페이지나 이미지 읽기가 중단됨. | |
|
onerror |
페이지나 이미지 읽기 중 오류가 발생함. | |
|
창/페이지 |
onresize |
창이나 요소의 크기가 변경됨. |
|
oncontextmenu |
컨텍스트 메뉴(Windows의 경우 오른쪽 버튼을 클릭했을 때 나타나는 메뉴)의 표시가 요청됨. | |
|
onfocus |
페이지나 폼 요소에 포커스가 맞춰짐. | |
|
onblur |
페이지나 폼 요소에서 포커스가 사라짐. | |
|
폼 요소 |
onsubmit |
폼을 전송하려고 함. |
|
onreset |
폼이 리셋됨. | |
|
onchange |
폼 요소의 선택, 입력 내용이 변경됨. | |
|
onselect |
텍스트가 선택됨. | |
|
마우스 |
onclick |
요소나 링크를 클릭함. |
|
ondblclick |
요소를 더블 클릭함. | |
|
onmouseodown |
마우스 버튼을 누름. | |
|
onmouseup |
마우스 버튼을 뗌. | |
|
onmouseover |
마우스 커서가 요소 위에 올려져 있음. | |
|
onmouseout |
마우스 커서가 요소를 벗어남. | |
|
onmousemove |
마우스를 움직이고 있음. | |
|
키보드 |
onkeypress |
키를 눌렀을 때 연속적으로 발생함. |
|
onkeyup |
누르고 있던 키를 뗌. | |
|
onkeydown |
키를 누름. |
* 이벤트 핸들러를 나중에 정의하기
- JavaScript 코드 안에서 이벤트 핸들러를 정의하는 일도 가능함.
- 예를 들어 페이지를 읽어 들일 때 처리를 수행하는 방법에는 아래와 같은 두 가지가 있음.
- 뒤의 방법은 이벤트 핸들러를 덮어 쓰는 것이 아니라 추가한다는 점이 다른 방법과 다름.
|
var e = getElementByTagName("body")[0]; e.onload = "처리 내용" |
|
var e = getElementByTagName("body")[0]; e.addEventListener("load", function() {처리 내용}, false}; |
1) addEventListener() 메서드
- 이벤트 핸들러를 추가함.
- IE에서는 지원하지 않으므로 그 대신 attachEvent("onload", function() {처리 내용})으로 작성함.
2) 부모 요소에 이벤트를 전파시키는 경우는 false, 하지 않는 경우는 true를 지정함. 보통은 false로 지정함.
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > JavaScript' 카테고리의 다른 글
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
|---|---|
| 객체 / 내장객체 (0) | 2017.05.20 |
| 자바스크립트 기초 문법 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
| JavaScript의 메서드 (0) | 2017.05.18 |
| 요소의 참조 (0) | 2017.05.17 |
| DOM이란? (0) | 2017.05.17 |
| JavaScript란? (0) | 2017.05.17 |
