자바스크립트 addEventListener() 함수 사용하는 방법

addEventListener() 함수는 JavaScript에서 이벤트를 처리하고 DOM 요소에 이벤트 핸들러를 추가할 때 사용합니다. 해당 함수는 요소에 이벤트를 등록하고 해당 이벤트가 발생할 때 실행할 함수를 지정할 수 있습니다. 이것을 콜백 함수라고 합니다. 이를 통해 웹 페이지의 상호작용을 향상시킬 수 있습니다. 이 함수를 통해 다양한 이벤트 유형(클릭, 키다운, 등)에 대한 처리를 구현할 수 있습니다.

 

 

◎ 1. addEventListener() 함수

 

addEventListener() 함수는 element로 지정된 DOM 요소에 event로 지정된 이벤트에 대한 리스너 함수를 등록합니다. 이벤트가 발생하면 함수가 실행됩니다. useCapture는 선택적 매개변수로, 이벤트 캡처링을 사용할지 여부를 지정합니다.

 

구문

 

element.addEventListener(event, function, useCapture)

l  element (DOM 요소, 필수): 이벤트를 등록할 DOM 요소입니다.

l  event (문자열, 필수): 리스너를 등록할 이벤트 유형 (예: "click", "keydown")입니다.

l  function (함수, 필수): 이벤트가 발생할 때 실행할 함수 또는 함수 표현식입니다.

l  useCapture (부울, 선택적): 이벤트 캡처링을 사용할 경우 true, 그렇지 않으면 false입니다.

   

 

 

◎ 2. 사용 예제

 

(1) 기본 addEventListener() 사용

 

const button = document.getElementById("myButton");
 
button.addEventListener("click", function() {
         alert("버튼이 클릭되었습니다.");
});

 

예제에서 addEventListener() 함수를 사용하여 "myButton" ID를 가진 버튼 요소에 "click" 이벤트 리스너를 등록합니다. 사용자에 의해 이벤트가 발생하면 함수가 실행되고 클릭된 버튼에 대한 경고 메시지가 표시합니다.

 

(2) 이벤트 객체 사용

 

const link = document.getElementById("myLink");
 
link.addEventListener("click", function(event) {
    event.preventDefault();
    alert("링크를 클릭했지만 이동하지 않습니다.");
});

 

예제에서 이벤트 리스너 함수는 이벤트 객체(event)를 사용하여 링크 클릭 시 기본 동작인 페이지 이동을 방지하고 경고 메시지를 표시합니다.