HTML DOM의 addEventListener() 메서드는 지정한 요소에 이벤트 핸들러를 연결할 때 사용하는 핵심 메서드입니다. 클릭, 마우스 오버, 키 입력 등 다양한 사용자 동작에 반응하는 인터랙티브한 웹 페이지를 만들 때 반드시 알아야 하는 기능입니다.
addEventListener() 기본 문법
element.addEventListener(event, function, capture)
각 매개변수의 의미는 다음과 같습니다.
- event: 이벤트 이름을 지정합니다. 예를 들어 'click', 'mouseover' 등이 있으며, 필수 값입니다.
- function: 해당 이벤트가 발생했을 때 실행할 함수를 지정합니다. 역시 필수 값입니다.
- capture: 이벤트가 캡처링 단계에서 실행될지 여부를 결정합니다. true 또는 false의 불리언 값을 가지며, 생략 시 기본값은 false입니다.
addEventListener() 사용 예제
아래 예제는 하나의 버튼에 두 개의 이벤트(마우스 오버, 클릭)를 각각 등록하고, 이벤트 발생 시 화면에 메시지를 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
var x = document.getElementById("btn");
x.addEventListener("mouseover", one);
x.addEventListener("click", two);
function one() {
document.getElementById("myid").innerHTML += "Button hovered! ";
}
function two() {
document.getElementById("myid").innerHTML += "!!Button Clicked!! ";
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 버튼이 화면에 나타납니다.
버튼 위로 마우스를 올리면 “Button hovered!”라는 메시지가 출력되고,
버튼을 클릭하면 “!!Button Clicked!!”라는 메시지가 추가로 표시됩니다. 이처럼 addEventListener()를 활용하면 하나의 요소에 여러 종류의 이벤트를 손쉽게 등록할 수 있습니다.
정리
addEventListener()는 HTML DOM 이벤트 처리의 기본이 되는 메서드로, 이벤트 이름과 실행할 함수만 지정하면 되기 때문에 사용법이 간단합니다. 또한 onclick 같은 인라인 이벤트 속성과 달리 하나의 요소에 여러 개의 이벤트 리스너를 중복 없이 추가할 수 있다는 장점이 있습니다.