1. 이벤트 핸들러 등록하기
1.1 elem.onclick
이벤트 핸들러를 등록하는 방법에는 DOM 요소에 접근한 다음 onclick 프로퍼티를 활용하는 방법과, HTML 태그에 onclick 프로퍼티를 활용하는 방법이 존재한다.
기본적으로, 프로퍼티에 어떤 값을 할당하는 방식은, 기존에 있던 프로퍼티 값(value)를 덮어쓰는 형태로 동작하기 때문에, 기존에 있는 값을 유지하면서 일부만 수정하기에는 어렵다는 단점이 있다.
또한, 중요한 이벤트를 덮어쓰는 상황이 발생할 수도 있고, 여러 개의 이벤트 핸들러를 다룰 수 없다는 단점도 존재한다.
이를 해결하는 첫 번째 방법은, 하나의 이벤트 핸들러 안에 여러 개의 이벤트 핸들러를 넣는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content" class="btns">
<button id="myBtn">JS Click!</button>
<button onclick="console.log('Hello Codeit!')">HTML Click!</button>
</div>
<script src="index.js"></script>
</body>
</html>let btn = document.querySelector('#myBtn');
btn.onclick = function () {
event1();
event2();
}다만, 이 방식도, 중간에 새로운 이벤트를 추가해야 하거나, 이 중 하나를 제거해야 하는 상황이 발생했을 때는, 대처가 쉽지 않다.
1.2 elem.addEventListener
💡 이벤트 핸들러를 등록할 때는, 이 방법을 사용하는 것을 가장 권장한다.
elem.addEventListener(event, handler)와 같이, 첫 번째 파라미터로 이벤트 타입을 문자열로 전달하고, 두 번째 파라미터로 이벤트 핸들러를 전달하면 된다.
이를 활용하면, 하나의 요소에 여러 개의 독립적인 이벤트 핸들러를 등록할 수 있다.
let btn = document.querySelector('#myBtn');
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);이 방식으로 등록한 이벤트의 경우, removeEventListener 메소드를 통해서 이벤트 핸들러를 개별적으로 제거할 수도 있다.
아래 예시는, 위에서 등록했던 이벤트 중 event2를 제거하는 코드이다.
let btn = document.querySelector('#myBtn');
btn.removeEventListener('click', event2);removeEventListener를 통해서 이벤트를 삭제할 때 주의해야 하는 점은, 반드시 등록할 때 사용했던 이벤트 핸들러를 그대로 전달해야 한다는 것이다.
특히, 함수의 경우, 외부에 함수를 만들어서, 해당 함수의 이름을 전달해야 한다는 점을 주의하자.
또한, 함수 이름을 전달할 때, 뒤에 소괄호를 붙이지 않는다는 점도 기억하자.
아래 예시의 경우, 언뜻 보면 event3!를 출력하는 이벤트가 잘 삭제되었을 것 같지만, 실제로는 삭제가 되지 않는다.
그 이유는 외부에 함수를 만든 후, 함수 이름을 전달한 것이 아니기 때문에, addEventListener에 넣은 이벤트 핸들러와 removeEventListener에 넣은 이벤트 핸들러를 서로 다른 함수로 인식했기 때문이다.
let btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
console.log('event3!');
});
btn.removeEventListener('click', function() {
console.log('event3!');
});2. 다양한 이벤트
2.1 마우스 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| mousedown | 마우스 버튼을 누르는 순간 |
| mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
| click | 왼쪽 버튼을 클릭한 순간 |
| dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
| contextmenu | 오른쪽 버튼을 클릭한 순간 |
| mousemove | 마우스를 움직이는 순간 |
| mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
| mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
| mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
| mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
2.2 키보드 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| keydown | 키보드의 버튼을 누르는 순간 |
| keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
| keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
2.3 포커스 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| focusin | 요소에 포커스가 되는 순간 |
| focusout | 요소로부터 포커스가 빠져나가는 순간 |
| focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
| blur | 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
2.4 입력 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| change | 입력된 값이 바뀌는 순간 |
| input | 값이 입력되는 순간 |
| select | 입력 양식의 하나가 선택되는 순간 |
| submit | 폼을 전송하는 순간 |
2.5 스크롤 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| scroll | 스크롤 바가 움직일 때 |
2.6 윈도우 창 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| resize | 윈도우 사이즈를 움직일 때 발생 |
3. 이벤트 객체
웹 페이지에서 어떤 이벤트가 발생하면, 그 이벤트와 관련된 다양한 정보를 담고 있는 이벤트 객체가 자동으로 생성된다.
이벤트 핸들러의 첫 번째 파라미터에는 항상 이벤트 객체가 전달된다.
3.1 이벤트 객체 프로퍼티
본 글에서 정리된 이벤트 객체 프로퍼티 외에도 더 많은 프로퍼티들이 있으나, 여기에서는 자주 사용되는 프로퍼티에 대해서만 다루었다.
3.1.1 공통 프로퍼티
공통 프로퍼티는 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티이다.
| 프로퍼티 | 설명 |
|---|---|
| type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
| target | 이벤트가 발생한 요소 |
| currentTarget | 이벤트 핸들러가 등록된 요소 |
| timeStamp | 이벤트 발생 시각 (페이지가 로드된 이후부터 경과한 밀리초) |
| bubbles | 버블링 단계인지를 판단하는 값 |
3.1.2 마우스 이벤트
| 프로퍼티 | 설명 |
|---|---|
| button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
| clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
| screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
3.1.3 키보드 이벤트
| 프로퍼티 | 설명 |
|---|---|
| key | 누른 키가 가지고 있는 값 |
| code | 누른 키의 물리적인 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
