JavaScript HTML DOM 요소에 이벤트 핸들러 추가하기
HTML DOM 요소에 이벤트 핸들러를 추가하려면 JavaScript의 addEventListener() 메서드를 사용하면 됩니다. 이 메서드는 지정한 요소에 이벤트 리스너를 연결하여, 사용자가 클릭하거나 키를 누르는 등의 특정 동작을 했을 때 원하는 함수를 실행할 수 있게 해줍니다.
addEventListener() 기본 문법
element.addEventListener(event, function);
- event: 클릭(click), 키 입력(keydown) 등 감지할 이벤트 유형을 문자열로 지정합니다.
- function: 해당 이벤트가 발생했을 때 실행할 함수를 지정합니다.
예제 코드
아래 예제는 버튼을 클릭하면 현재 날짜와 시간이 화면에 표시되도록 이벤트 핸들러를 추가하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭해 보세요.</p>
<button id = "btnid">클릭</button>
<p id = "pid"></p>
<script>
document.getElementById("btnid").addEventListener("click", displayEvent);
function displayEvent() {
document.getElementById("pid").innerHTML = Date();
}
</script>
</body>
</html>addEventListener() 사용 시 장점
기존의 onclick 속성과 달리, addEventListener()는 하나의 요소에 여러 개의 이벤트 핸들러를 중복 없이 추가할 수 있습니다. 또한 기존에 등록된 핸들러를 덮어쓰지 않기 때문에, 복잡한 웹 애플리케이션에서 이벤트를 보다 유연하고 체계적으로 관리할 수 있습니다.