이벤트 리스너와 핸들러
자바스크립트 이벤트 리스너와 이벤트 핸들러는 웹 개발에서 자주 사용되는 중요한 개념입니다. 두 용어는 종종 혼동되어 사용되기도 하지만, 각각의 역할과 사용 방법에는 분명한 차이점이 있습니다. 이 글에서는 자바스크립트의 이벤트 리스너와 이벤트 핸들러의 차이점을 살펴보고, 각각의 특징, 사용 예제, 주요 이벤트, 그리고 주의해야 할 사항들을 다루어 보겠습니다.
이벤트 리스너(Event Listener)
이벤트 리스너는 특정 이벤트가 발생했을 때 반응하기 위해 설정하는 기능입니다. addEventListener 메소드를 사용하여 원하는 요소에 이벤트 리스너를 추가할 수 있습니다.
특징
- 다중 리스너 등록 가능: 한 요소에 여러 개의 이벤트 리스너를 등록할 수 있습니다. 예를 들어, 한 버튼에 클릭 이벤트 리스너와 마우스 오버 이벤트 리스너를 동시에 등록할 수 있습니다.
- 이벤트 전파 제어: 이벤트 캡처링(capturing)과 버블링(bubbling)을 제어할 수 있습니다. 이는 이벤트가 DOM 트리를 통해 어떻게 전파되는지를 결정합니다.
- 세밀한 설정 가능: addEventListener의 세 번째 인자로 전달되는 옵션 객체를 통해 다음과 같은 세부 설정이 가능합니다.
- capture: 이벤트 리스너가 캡처링 단계에서 활성화될지, 버블링 단계에서 활성화될지 결정합니다. 기본값은 false이며, 버블링 단계에서만 활성화됩니다. true는 캡처링 단계에서 활성화됩니다.
- once: 이 옵션을 true로 설정하면 이벤트 리스너가 이벤트를 한 번 처리한 후 자동으로 제거됩니다. 일회성 이벤트 처리에 유용합니다.
- passive: 이 옵션을 true로 설정하면 preventDefault()를 호출하지 않음을 나타냅니다. 주로 성능 향상을 위해 스크롤과 같은 이벤트에서 사용됩니다.
이벤트 리스너 주요 이벤트
| 이벤트 | 설명 | 예제 |
|---|---|---|
| click | 사용자가 요소를 클릭했을 때 발생합니다. | element.addEventListener(‘click’, function() { console.log(‘클릭됨!’); }); |
| dblclick | 사용자가 요소를 더블 클릭했을 때 발생합니다. | element.addEventListener(‘dblclick’, function() { console.log(‘더블 클릭됨!’); }); |
| mouseover | 마우스 포인터가 요소 위로 이동했을 때 발생합니다. | element.addEventListener(‘mouseover’, function() { console.log(‘마우스 오버!’); }); |
| mouseout | 마우스 포인터가 요소에서 벗어났을 때 발생합니다. | element.addEventListener(‘mouseout’, function() { console.log(‘마우스 아웃!’); }); |
| mousemove | 마우스가 요소 위에서 움직일 때 발생합니다. | element.addEventListener(‘mousemove’, function() { console.log(‘마우스 움직임!’); }); |
| keydown | 키보드의 키를 눌렀을 때 발생합니다. | document.addEventListener(‘keydown’, function(event) { console.log(‘키 다운: ‘ + event.key); }); |
| keyup | 키보드의 키를 눌렀다 떼었을 때 발생합니다. | document.addEventListener(‘keyup’, function(event) { console.log(‘키 업: ‘ + event.key); }); |
| change | 입력 요소의 값이 변경되었을 때 발생합니다(예: 텍스트 입력, 체크박스 선택 변경 등). | inputElement.addEventListener(‘change’, function() { console.log(‘값 변경됨!’); }); |
| submit | 폼이 제출될 때 발생합니다. | formElement.addEventListener(‘submit’, function(event) { event.preventDefault(); console.log(‘폼 제출!’); }); |
| load | 이미지, 스크립트, 문서 로딩 완료 시 발생합니다. | window.addEventListener(‘load’, function() { console.log(‘로딩 완료!’); }); |
| resize | 브라우저 창의 크기가 변경될 때 발생합니다. | window.addEventListener(‘resize’, function() { console.log(‘창 크기 변경됨!’); }); |
| scroll | 스크롤할 때 발생합니다. | window.addEventListener(‘scroll’, function() { console.log(‘스크롤!’); }); |
사용 예제
JavaScript
const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
console.log("버튼이 클릭되었습니다!");
});이벤트 핸들러(Event Handler)
이벤트 핸들러는 특정 이벤트에 대해 할당된 함수로, 이벤트가 발생하면 실행됩니다. DOM 요소의 이벤트 처리 속성을 통해 직접 할당됩니다.
특징
- 직접 할당: 이벤트 핸들러는 요소의 특정 이벤트 속성에 직접 할당됩니다. 예를 들어, onclick 속성에 할당하면 클릭 이벤트에 반응하는 함수가 됩니다.
- 하나의 핸들러만 할당 가능: 한 이벤트에 대해 하나의 이벤트 핸들러만 할당할 수 있습니다. 새로운 핸들러를 할당하면 이전 핸들러는 제거됩니다.
- 간결성: 이벤트 핸들러는 간단하고 직관적으로 사용됩니다. 복잡한 설정 없이 이벤트에 대한 기본 반응을 정의하는 데 적합합니다.
이벤트 핸들러 주요 이벤트
| 이벤트 | 설명 | 예제 |
|---|---|---|
| onclick | 요소를 클릭했을 때 발생합니다. | element.onclick = function() { /* 코드 */ }; |
| ondblclick | 요소를 더블 클릭했을 때 발생합니다. | element.ondblclick = function() { /* 코드 */ }; |
| onmouseover | 마우스 포인터가 요소 위로 이동했을 때 발생합니다. | element.onmouseover = function() { /* 코드 */ }; |
| onmouseout | 마우스 포인터가 요소 밖으로 이동했을 때 발생합니다. | element.onmouseout = function() { /* 코드 */ }; |
| onmousemove | 마우스 포인터가 요소 위에서 움직일 때 발생합니다. | element.onmousemove = function() { /* 코드 */ }; |
| onmousedown | 마우스 버튼을 요소 위에서 눌렀을 때 발생합니다. | element.onmousedown = function() { /* 코드 */ }; |
| onmouseup | 마우스 버튼을 요소 위에서 눌렀다가 놓았을 때 발생합니다. | element.onmouseup = function() { /* 코드 */ }; |
| onkeydown | 키보드의 키를 눌렀을 때 발생합니다. | element.onkeydown = function() { /* 코드 */ }; |
| onkeyup | 키보드의 키를 눌렀다가 놓았을 때 발생합니다. | element.onkeyup = function() { /* 코드 */ }; |
| onkeypress | 키보드의 키를 눌렀을 때 (특정 키에 대해 onkeydown과 onkeyup 사이에 발생) | element.onkeypress = function() { /* 코드 */ }; |
| onchange | 입력 요소의 값이 변경되었을 때 발생합니다. (예: 텍스트 필드의 내용 변경) | element.onchange = function() { /* 코드 */ }; |
| onsubmit | 폼이 제출될 때 발생합니다. | form.onsubmit = function() { /* 코드 */ }; |
| onload | 문서 또는 이미지가 완전히 로드되었을 때 발생합니다. | window.onload = function() { /* 코드 */ }; |
| onresize | 창 또는 프레임의 크기가 변경되었을 때 발생합니다. | window.onresize = function() { /* 코드 */ }; |
| onscroll | 스크롤이 발생했을 때 발생합니다. | element.onscroll = function() { /* 코드 */ }; |
사용 예제
JavaScript
const button = document.querySelector("#myButton");
button.onclick = function() {
console.log("버튼이 클릭되었습니다!");
};차이점 및 주의사항
차이점
- 등록 방식: 리스너는 addEventListener를 사용하여 등록하고, 핸들러는 요소의 이벤트 속성에 직접 할당합니다.
- 다중 등록: 리스너는 여러 개를 등록할 수 있지만, 핸들러는 한 요소에 하나만 할당 가능합니다.
- 이벤트 전파: 리스너는 이벤트 전파를 제어할 수 있지만, 핸들러는 이런 제어가 불가능합니다.
주의사항
- 이벤트 전파: 이벤트 리스너를 사용할 때는 이벤트 캡처링과 버블링을 이해하고 적절히 제어해야 합니다.
- 메모리 관리: 불필요한 이벤트 리스너는 메모리 누수를 일으킬 수 있으므로 주의해야 합니다.
결론
자바스크립트에서 이벤트 리스너와 이벤트 핸들러는 각기 다른 목적과 사용 방법을 가지고 있습니다. 이벤트 리스너는 다양한 이벤트에 유연하게 대응할 수 있는 반면, 이벤트 핸들러는 특정 이벤트에 대해 간결하고 직관적으로 작업을 수행할 수 있습니다. 개발자는 애플리케이션의 요구사항과 상황에 따라 적절한 방법을 선택하여 사용하는 것이 중요합니다.