안녕하세요! 오늘은 자바스크립트의 이벤트와 이벤트 리스너에 대해 공부하고자 합니다.
본격적으로 이벤트와 이벤트 리스너를 알아보기 전에 몇 가지 용어를 정리해보겠습니다.
대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행됩니다. 이처럼 버튼을 클릭하거나 항목을 선택하는 것은 이벤트(event)라고 하고, 이벤트가 발생했을 때 실행하는 함수를 이벤트 처리기라고 합니다!
이제 이벤트에 대해 알아보겠습니다. 오늘은 총 4가지의 이벤트에 대해 알아볼 것입니다!
1. 마우스 이벤트
마우스를 동작하였을 때 발생하는 이벤트입니다.
- click : 사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다.
- dblclick : 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생합니다.
- mousedown : 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
- mousemove : 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다.
- mouseover : 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다.
- mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.
- mouseup : 사용자가 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤트가 발생합니다.
2. 키보드 이벤트
키보드에서 특정 키를 조작할 때 발생하는 이벤트입니다.
- keydown : 사용자가 키를 누르는 동안 이벤트가 발생합니다.
- keypress : 사용자가 키를 눌렀을 때 이벤트가 발생합니다.
- keyup : 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.
3. 문서 로딩 이벤트
웹이 로딩중이거나, 스크롤 하였을 때 발생하는 이벤트입니다.
- abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
- error : 무선가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
- load : 문서 로딩이 끝나면 이벤트가 발생합니다.
- resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
- scroll : 문서 화면이 스크롤되었을 때 이벤트가 발생합니다.
- unload : 문서에서 벗어날 때 이벤트가 발생합니다.
4. 폼 이벤트
Form은 로그인창이나 검색창처럼 정보를 입력하는 요소들을 말합니다.
폼 요소에 내용을 입력하면서 발생하는 이벤트입니다.
- blur : 폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
- change : 목록이나 체크 상태 등이 변경되면 이벹트가 발생합니다.
- <input>, <select>, <textarea> 태그에서 사용합니다.
- focus : 폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다.
- <label>, <select>, <textarea>, <button> 태그에서 사용합니다.
- reset : 폼이 리세되었을 때 이벤트가 발생합니다.
- submit : submit 버튼을 클릭했을 때 이벤트가 발생합니다.
이벤트 처리기 알아보기
웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러(event handler)라고 합니다.
이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것입니다.
<HTMl태그 on이벤트명 = "함수명">
실습코드를 살펴보도록 하겠습니다!
코드
<html lang="en">
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-content: space-around;
}
body .btn {
margin: 10px;
width: 200px;
height: 50px;
}
</style>
<title>Event Study</title>
</head>
<body>
<input type="button" value="click" class="btn" onclick="alert('click')">
<input type="button" value="over" class="btn" onmouseover="alert('mouseover!')">
<input type="button" value="double click" class="btn" ondblclick="alert('dbclick!')">
</body>
</html>
이벤트 리스너가 사용된 부분은 바로 이 코드들입니다.
<input type="button" value="click" class="btn" onclick="alert('click')">
<input type="button" value="over" class="btn" onmouseover="alert('mouseover!')">
<input type="button" value="double click" class="btn" ondblclick="alert('dbclick!')">✓ click버튼을 클릭하면 onclick이벤트가 활성화 되면서 alert() 함수가 실행됩니다.
✓ 마우스 포인터를 움직이면 mouseover이벤트가 활성화되면서 alert()함수가 실행됩니다.
✓ double click 버튼을 더블클릭하면 마찬가지로 dblclick이벤트가 활성화 되면서 alert()함수가 실행되게 됩니다!
실행결과
이렇게 오늘 이벤트와 이벤트 처리기에 대해 알아보았습니다.
이벤트는 이 게시물에 있는 것 말고도 아주 많습니다!! 만약 더 많은 이벤트에 대해 알고 싶다면 https://developer.mozilla.org/en-US/docs/Web/Events 여기서 확인할 수 있습니다!!
혹시 궁금한 점이 있다면 댓글로 달아주세용!!
'TweekS Study > JavaScript' 카테고리의 다른 글
| [JavaScript] DOM 객체로 HTML 요소의 속성 바꾸기 (0) | 2023.06.06 |
|---|---|
| [JavaScript] DOM 객체와 이벤트 처리에 대하여 (3) | 2023.06.04 |
| [JavaScript] 전역과 지역 변수 및 함수에 대하여 (0) | 2023.06.01 |
| [JavaScript] 함수(function)란 무엇일까? (0) | 2023.05.29 |
