왕진 블로그
반응형
Web Development · JavaScript
JavaScript 이벤트 리스너
DOM 프로퍼티, addEventListener, 익명 함수, 이벤트 객체 전달 방식을 한 번에 비교합니다.
시작 오늘 분석할 코드
이 예제 묶음은 같은 동작, 즉 마우스를 올리면 배경색을 바꾸고 마우스를 빼면 원래대로 돌리는 기능을 여러 방식으로 구현합니다. 핵심은 이벤트가 발생했을 때 어떤 함수가 실행되도록 연결하느냐입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</title> <script> let p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.onmouseover = over; // over() 함수를 onmouseover 리스너로 등록 p.onmouseout = out; // out() 함수를 onmouseout 리스너로 등록 } function over() { p.style.backgroundColor="orchid"; } function out() { p.style.backgroundColor="white"; } </script></head> <body onload="init()"> <h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> <!-- 다음 이벤트 리스너 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>addEventListener()를 이용한 리스너 등록</title> <script> let p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.addEventListener("mouseover", over); // 이벤트 리스너 등록 p.addEventListener("mouseout", out); // 이벤트 리스너 등록 // p.addEventListener("mouseover", function() { //번외 콘솔로그 // console.log("마우스를 올렸습니다!"); } function over() { p.style.backgroundColor="orchid"; } function out() { p.style.backgroundColor="white"; } </script> </head> <body onload="init()"> <h3>addEventListener()를 이용한 리스너 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> <!-- 다음 이벤트 리스너 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>익명 함수로 이벤트 리스너 작성</title> <script> let p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.onmouseover = function () { // 익명 함수 this.style.backgroundColor = "orchid"; }; p.addEventListener("mouseout", function () { this.style.backgroundColor = "white"; } // 익명 함수 ); } </script> </head> <body onload="init()"> <h3>익명 함수로 이벤트 리스너 작성</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body> </html> <!-- 다음 이벤트 리스너 예제 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>이벤트 객체 전달받기</title> </head> <body> <p id="p">이곳에 마우스를 올려 보세요</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 alert(e.type); // 이벤트 종류 출력 } document.getElementById("p").onmouseover = f; </script> </body> </html>
실제 출력 미리보기
마우스를 올리면 orchid 색으로 변경
용어 용어 정리
event사용자 동작이나 브라우저 상태 변화처럼 특정 시점에 발생하는 신호입니다.
listener이벤트가 발생했을 때 실행할 함수입니다.
onmouseover마우스가 요소 위로 올라왔을 때 실행되는 이벤트 프로퍼티입니다.
onmouseout마우스가 요소 밖으로 나갔을 때 실행되는 이벤트 프로퍼티입니다.
addEventListener하나의 이벤트에 여러 리스너를 등록할 수 있는 표준 메서드입니다.
event object이벤트 종류, 대상, 좌표 같은 정보를 담아 함수에 전달되는 객체입니다.
1 이벤트 리스너가 필요한 이유
왜 함수만 만들면 끝이 아닐까?
함수를 만들어도 브라우저는 언제 그 함수를 실행해야 하는지 알 수 없습니다. 버튼 클릭, 마우스 이동, 문서 로드 같은 이벤트와 함수를 연결해야 실제 화면에서 반응이 생깁니다.
사용자 동작
→
이벤트 발생
→
리스너 함수 실행
→
DOM 변경
이벤트 리스너는 “무슨 일이 일어나면 어떤 함수를 실행할지”를 등록하는 코드입니다.
2 on프로퍼티 방식
DOM 객체의 onmouseover, onmouseout 같은 프로퍼티에 함수를 대입하면 해당 이벤트가 발생할 때 함수가 실행됩니다.
p.onmouseover = over; p.onmouseout = out;
이 방식은 짧고 이해하기 쉽지만 같은 이벤트 프로퍼티에 새 함수를 다시 대입하면 이전 리스너가 덮어써질 수 있습니다.
3 addEventListener 방식
addEventListener()는 이벤트 이름과 실행할 함수를 인자로 받습니다. 이벤트 이름에는 mouseover처럼 on을 붙이지 않습니다.
| 구분 | on프로퍼티 | addEventListener |
|---|---|---|
| 이벤트 이름 | onmouseover | mouseover |
| 등록 방식 | 프로퍼티에 함수 대입 | 메서드 호출 |
| 여러 리스너 | 덮어쓰기 위험 | 여러 개 등록 가능 |
| 권장도 | 기초 예제에 적합 | 실무에서 더 권장 |
반응형
4 익명 함수로 바로 등록하기
리스너 함수가 한 곳에서만 쓰인다면 이름 있는 함수를 따로 만들지 않고 익명 함수로 바로 등록할 수 있습니다. 예제에서는 this를 사용해 이벤트가 발생한 요소 자신의 스타일을 바꿉니다.
p.onmouseover = function () { this.style.backgroundColor = "orchid"; };
익명 함수는 짧은 예제에는 편하지만, 코드가 길어지면 함수 이름이 없어 디버깅과 재사용이 어려울 수 있습니다.
5 이벤트 객체 전달
이벤트 리스너 함수는 이벤트 객체를 받을 수 있습니다. 예제의 f(e)에서 e.type을 출력하면 click, mouseover처럼 어떤 이벤트가 발생했는지 알 수 있습니다.
| 속성 | 의미 | 예시 |
|---|---|---|
| type | 이벤트 종류 | click, mouseover |
| target | 이벤트가 실제 발생한 요소 | button, p |
| currentTarget | 리스너가 등록된 요소 | 리스너 기준 요소 |
| clientX/clientY | 마우스 좌표 | 포인터 위치 계산 |
6 onload와 초기화 함수
예제들은 body onload="init()"를 사용합니다. 문서가 완전히 로드된 뒤 getElementById()로 요소를 찾아야 null 오류를 피할 수 있기 때문입니다.
1
문서 로드HTML 요소가 브라우저에 만들어집니다.
2
init 실행id가 p인 요소를 찾아 변수에 저장합니다.
3
리스너 등록mouseover와 mouseout에 함수를 연결합니다.
4
사용자 동작마우스 이동에 따라 배경색이 바뀝니다.
7 this와 변수 p 비교
이름 있는 함수 예제는 바깥 변수 p를 직접 사용하고, 익명 함수 예제는 this를 사용합니다. 둘 다 같은 요소를 가리킬 수 있지만 상황에 따라 의미가 달라질 수 있습니다.
p 변수 사용
초기화 함수에서 찾은 특정 요소를 계속 참조합니다. 대상이 하나일 때 단순합니다.
this 사용
현재 이벤트가 연결된 요소를 기준으로 동작합니다. 여러 요소에 같은 함수를 붙일 때 유용합니다.
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| addEventListener에 onmouseover라고 씀 | 리스너가 실행되지 않습니다. | mouseover처럼 on을 빼고 씁니다. |
| 함수를 호출해서 등록함 | 로드 중 바로 실행되고 이벤트 때 실행되지 않습니다. | over()가 아니라 over처럼 함수 이름만 전달합니다. |
| 요소가 만들어지기 전에 찾음 | p가 null이 되어 오류가 납니다. | onload 또는 DOMContentLoaded 이후 등록합니다. |
| event 객체를 받지 않음 | 이벤트 종류와 대상 정보를 알 수 없습니다. | 리스너 함수 매개변수로 e 또는 event를 받습니다. |
| this 의미를 혼동 | 엉뚱한 객체의 스타일을 바꾸려 합니다. | 일반 함수와 화살표 함수의 this 차이를 확인합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 요소 찾기 | getElementById로 대상 요소를 정확히 찾았습니다. |
| 등록 시점 | 요소가 로드된 뒤 리스너를 등록합니다. |
| 등록 방식 | on프로퍼티와 addEventListener 차이를 구분합니다. |
| 함수 전달 | 함수 실행 결과가 아니라 함수 자체를 전달합니다. |
| 이벤트 객체 | 필요할 때 event.type, target 정보를 확인합니다. |
핵심 한 줄 요약
event listener이벤트가 발생했을 때 실행할 함수를 요소에 등록하는 방식입니다.
on property간단하지만 같은 이벤트에 여러 함수를 붙이기 어렵습니다.
addEventListener여러 리스너를 등록할 수 있어 실무에서 더 유연합니다.
event object발생한 이벤트의 종류와 대상 정보를 담고 있습니다.
Tags
#JavaScript #이벤트 #이벤트리스너 #addEventListener #DOM #event #mouseover #mouseout #onclick #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, 이벤트, 이벤트리스너, addEventListener, DOM, event, mouseover, mouseout, onclick, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript 이벤트 취소 — preventDefault·return false 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 이벤트 객체·흐름 — 캡처·버블링 완전 정리 (0) | 2026.07.05 |
| JavaScript 동적 DOM — createElement·appendChild·removeChild 완전 정리 (0) | 2026.07.05 |
| JavaScript getElementsBy — ClassName·TagName·인라인 리스너 완전 정리 (0) | 2026.07.05 |
| JavaScript DOM 기초 — DOM 트리·write·writeln·window.open 완전 정리 (0) | 2026.07.05 |
댓글