addEventListener 메서드

addEventListener 메서드를 사용하면 요소에 이벤트 핸들러를 할당할 수 있습니다. 이를 통해 예를 들어, 버튼 클릭 시 무엇을 할지 또는 텍스트 필드에 텍스트를 입력할 때 무엇을 할지 지정할 수 있습니다. 첫 번째 매개변수에는 전달할 이벤트의 유형을, 두 번째 매개변수에는 첫 번째 매개변수에 지정된 이벤트 후에 실행될 함수를 지정합니다. 세 번째 선택적 매개변수에는 객체의 특성(once, capture, passive) 또는 useCapture 매개변수를 전달합니다.

구문

요소.addEventListener('이벤트 유형', 함수, [객체 특성]);
또는
요소.addEventListener('이벤트 유형', 함수, [useCapture]);

예제

버튼을 클릭할 때 메시지가 출력되도록 만들어 봅시다:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('message');
});

예제

입력 필드에서 포커스를 잃었을 때 해당 입력 필드의 텍스트를 포함한 메시지가 출력되도록 코드를 작성해 봅시다:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

예제

버튼을 클릭할 때 콘솔에 메시지가 한 번만 출력되도록 만들어 봅시다. 이를 위해 세 번째 매개변수를 사용하겠습니다:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

예제

passive 매개변수는 이벤트 처리 시 event.preventDefault 메서드 호출을 금지합니다. 이전 예제에 event.preventDefault 메서드를 적용하고, passive 매개변수에 true 값을 지정해 봅시다:

<input type="button" id="button" value="click me">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

코드를 실행한 후 다음과 같은 메시지를 볼 수 있습니다:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

예제

useCapture 매개변수를 true로 설정하면 이벤트가 내부 요소에서 외부 요소로 버블링되고, false로 설정하면 외부 요소에서 내부 요소로 버블링됩니다. useCapture 매개변수를 전달할 때는 이름을 생략하고 그냥 true 또는 false로 기록합니다. 부모 요소와 자식 요소를 클릭할 때 이벤트가 어떻게 버블링되는지 살펴봅시다:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

참고 항목

요소에서 이벤트를 제거하는 removeEventListener 메서드