✅ 이벤트
웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
✅ 이벤트 핸들러
등록하기
인라인 방식
<div onclick="alert('1. 클릭했습니다.')">클릭</div>
<div onclick="view()">클릭</div>
<script>
function view() {
alert("2. 클릭했습니다");
}
</script>일반 방식
이벤트 리스너(Event Listener)
이벤트를 기다렸다가(듣다가) 발생하면 지정한 함수(핸들러) 를 실행하는 것.
addEventListener(이벤트 등록 메소드) 메소드 사용
// 첫 번째 인자: 이벤트 이름(종류)
// 두 번째 인자: 이벤트 발생 시 실행할 함수(콜백)
element.addEventListener('이벤트 종류', 함수);
// -------------------------------------------
// 이벤트 객체(Event Object)
// 이벤트 핸들러 함수는 실행될 때 자동으로 이벤트 객체를 전달받는다.
// 이벤트 타겟: button
// 이벤트 타입: click, mouseenter
1.
const button = document.querySelector('button');
button.addEventListener('click', function(){
alert('버튼을 클릭했습니다!');
});
2.
button.addEventListener("mouseenter", dehighlight);
function dehighlight(e) {
e.currentTarget.style.backgroundColor = "#cfa";
}
3.
document.addEventListener("dragover", (e) => {
e.preventDefault();
});
...삭제하기
element.removeEventListener('type', handler);✅ 이벤트의 종류
마우스 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| mousedown | 마우스 버튼을 누르는 순간 |
| mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
| click | 왼쪽 버튼을 클릭한 순간 |
| dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
| contextmenu | 오른쪽 버튼을 클릭한 순간 |
| mousemove | 마우스를 움직이는 순간 |
| mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
| mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
| mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
| mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
키보드 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| keydown | 키보드의 버튼을 누르는 순간 |
| keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
| keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
포커스 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| focusin | 요소에 포커스가 되는 순간 |
| focusout | 요소로부터 포커스가 빠져나가는 순간 |
| focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
| blur | 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
폼/입력 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| change | 입력된 값이 바뀌는 순간 |
| input | 값이 입력되는 순간 |
| select | 입력 양식의 하나가 선택되는 순간 |
| submit | 폼을 전송하는 순간 |
스크롤 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| scroll | 스크롤 바가 움직일 때 |
로드 및 기타 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
| resize | 윈도우 사이즈를 움직일 때 발생 |
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트 발생 |
✅ 이벤트 객체의 주요 프로퍼티
공통 프로퍼티
모든 이벤트 객체가 공통적으로 가지는 속성.
| 프로퍼티 | 설명 |
|---|---|
| type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
| target | 이벤트가 발생한 요소 |
| currentTarget | 이벤트 핸들러가 등록된 요소 |
| timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
| bubbles | 버블링 단계인지를 판단하는 값 |
마우스 이벤트
마우스 관련 이벤트에서 사용할 수 있는 속성들.
| 프로퍼티 | 설명 |
|---|---|
| button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
| clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
| screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
키보드 이벤트
키보드 관련 이벤트에서 사용할 수 있는 속성들.
| 프로퍼티 | 설명 |
|---|---|
| key | 누른 키가 가지고 있는 값 |
| code | 누른 키의 물리적인 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
🌠 더 많은 프로퍼티
이벤트
마우스 이벤트
키보드 이벤트
✅ 버블링
이벤트가 자식 요소에서 부모 요소로 전파되는 현상
이벤트 버블링 차단
event.stopPropagation();✅ 캡처링
이벤트 전파의 첫 번째 단계
이벤트가 가장 바깥쪽 요소부터 안쪽 요소로 전달되는 과정
예시
실행 순서:
1. body의 캡처링 이벤트 리스너 실행
2. 버튼의 클릭 이벤트 실행
document.body.addEventListener('click', function(){
console.log('body에서 캡처링');
}, true); // 세 번째 인자가 true면 캡처링 단계에서 실행
document.getElementById('btn').addEventListener('click', function(){
console.log('버튼 클릭');
});이벤트 흐름
- 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
표준 DOM 이벤트
자바스크립트의 이벤트 순서
addEventListner에 캡쳐링 단계 적용하기
✅ 이벤트 위임
이벤트 버블링을 이용해 부모 요소에만 이벤트 핸들러를 등록하고,
이벤트가 발생한 자식 요소를 구분하여 처리하는 방식.
✔️ 자식 요소 각각에 핸들러를 달지 않아도 된다.
✔️ 성능과 유지보수 측면에서 효율적이다.
예시
예) ul 안에 여러 li가 있을 때, 각 li 클릭 시 실행
- 일반적인 방식
// li 갯수만큼 핸들러가 등록됨.
const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', function(){
console.log(this.textContent);
});
});- 이벤트 위임 방식
// 핸들러 1개만 등록
// 새로운 li가 동적으로 추가되어도 자동 적용 가능
const ul = document.querySelector('ul');
ul.addEventListener('click', function(event){
if(event.target.tagName === 'LI'){
console.log(event.target.textContent);
}
});✅ 브라우저의 기본 동작
브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있다.
e.g.) a 태그 클릭 시, 페이지 이동이나 form submit 시 페이지 새로고침 등
기본 동작 막기
이벤트 객체의 preventDefault() 메소드를 사용.
const link = document.querySelector('a');
link.addEventListener('click', function(event){
event.preventDefault(); // 기본 이동 차단
console.log('링크 클릭 기본 동작이 막혔습니다.');
});
참고자료
코드잇 | 자바스크립트 이벤트
기술 블로그