JavaScript 이벤트 핸들러
- 웹/JavaScript
- 2020. 3. 13.
반응형
반응형
JavaScript 는 HTML 에 넣을 수 있는 스크립트 언어라고 했었다.
스트립트 언어이면 우리가 어떤 지시사항을 넣으면 그걸 해석해 작동되는 방식이다. 이런 JavaScript 의 특징을 가지고 다양한 방식으로 지시를 내려서 우리가 원하는 것이 나올 수 있도록 만들 수 있다. 이를 이용해 일종의 인과관계를 넣어 동작을 지시하려고 한다. 예를 들어, '마우스 커서가 위에 있으면 이미지가 바뀐다' 나 '이미지를 클릭하면 다른 사이트로 이동한다' 같이 어떤 조건을 만족시키면 동작을 취하는 것들을 말한다.
여기서, '마우스 커서가 위에 있다' 나 '이미지를 클릭한다' 같이 조건에 해당하는 것을 이벤트라고 하고,
인과관계를 지정하는것을 이벤트핸들러 라고 한다.
이벤트 핸들러의 종류
이벤트 핸들러에는 다음과 같은 것들이 있다. 이벤트명은 이벤트 핸들러명에서 on을 떼면 된다.
| 이벤트 핸들러 | |
| onload | 페이지나 이미지 읽기 완료 |
| onunload |
창을 닫음, 다른 페이지로 전환함, 페이지 변경됨 |
| onabort | 페이지나 이미지 읽기가 중단됨 |
| onerror | 페이지나 이미지 읽기 중 오류가 발생함 |
| onresize | 창이나 요소의 크기가 변경됨 |
| oncontextmenu | 컨텍스트 메뉴의 표시가 요청됨 |
| onfocus | 페이지나 폼 요소에 포커스가 맞춰짐 |
| onblur | 페이지나 폼 요소에 포커스가 사라짐 |
| onsubmit | 폼을 전송하려고 함 |
| onreset | 폼이 리셋됨 |
| onchange | 폼 요소 선택, 입력 내용 변경됨 |
| onselect | 텍스트 선택됨 |
| onclick | 요소나 링크를 클릭함 |
| ondblclick | 요소를 더블 클릭함. |
| onmousedown | 마우스 버튼을 누름 |
| onmouseup | 마우스 버튼을 뗌 |
| onmouseover | 마우스 커서와 요소 위에 올려져 있음 |
| onmounseout | 마우스 커서가 요소를 벗어남 |
| onmousemove | 마우스를 움직이고 있음 |
| onkeypress | 키를 눌렀을 때 연속적으로 발생함 |
| onkeyup | 누르고 있던 키를 뗌 |
| onkeydown | 키를 누름 |
이벤트 핸들러 활용
실제적으로 어떻게 움직이는지 보자.
위의 표 중에 onmouseover 와 onmouseout 을 이용해 이미지 위에 마우스가 있을때와 없을때 이미지가 바뀌게 하는 이벤트 핸들러를 만들어보자.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<img src = "image1.png"
onmouseover="this.src='image2.png'"
onmouseout="this.src='image1.png'">
</body>
</html>여기서 this 는 자기 자신의 요소 오브젝트를 나타내는 키워드이다.
실제로 실행을 하면 다음과 같이 이미지 위에 마우스를 올려놓았을 때 이미지가 바뀌는 것을 볼 수 있다.
그림은 픽사베이에서 가져왔다.
'웹 > JavaScript' 카테고리의 다른 글
| JavaScript 작성장소 (0) | 2020.03.09 |
|---|