Categories: JavaScript

JavaScript 자바스크립트 이벤트 리스너 Vs 이벤트 핸들러

javascript

이벤트 리스너와 핸들러

자바스크립트 이벤트 리스너와 이벤트 핸들러는 웹 개발에서 자주 사용되는 중요한 개념입니다. 두 용어는 종종 혼동되어 사용되기도 하지만, 각각의 역할과 사용 방법에는 분명한 차이점이 있습니다. 이 글에서는 자바스크립트의 이벤트 리스너와 이벤트 핸들러의 차이점을 살펴보고, 각각의 특징, 사용 예제, 주요 이벤트, 그리고 주의해야 할 사항들을 다루어 보겠습니다.

이벤트 리스너(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("버튼이 클릭되었습니다!");
});

JavaScript

이벤트 핸들러(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("버튼이 클릭되었습니다!");
};

JavaScript

차이점 및 주의사항

차이점

등록 방식: 리스너는 addEventListener를 사용하여 등록하고, 핸들러는 요소의 이벤트 속성에 직접 할당합니다.
다중 등록: 리스너는 여러 개를 등록할 수 있지만, 핸들러는 한 요소에 하나만 할당 가능합니다.
이벤트 전파: 리스너는 이벤트 전파를 제어할 수 있지만, 핸들러는 이런 제어가 불가능합니다.

주의사항

이벤트 전파: 이벤트 리스너를 사용할 때는 이벤트 캡처링과 버블링을 이해하고 적절히 제어해야 합니다.
메모리 관리: 불필요한 이벤트 리스너는 메모리 누수를 일으킬 수 있으므로 주의해야 합니다.

결론

자바스크립트에서 이벤트 리스너와 이벤트 핸들러는 각기 다른 목적과 사용 방법을 가지고 있습니다. 이벤트 리스너는 다양한 이벤트에 유연하게 대응할 수 있는 반면, 이벤트 핸들러는 특정 이벤트에 대해 간결하고 직관적으로 작업을 수행할 수 있습니다. 개발자는 애플리케이션의 요구사항과 상황에 따라 적절한 방법을 선택하여 사용하는 것이 중요합니다.

suover