자바스크립트 addEventListener

addEventListener는 자바스크립트에서 이벤트를 처리하는 메소드 중 하나로, 지정된 이벤트에 대한 이벤트 핸들러를 등록하는 역할을 합니다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수를 의미합니다.

 

 

사용법

 

이 메소드는 다음과 같은 구조를 가집니다.

 

element.addEventListener(event, function, useCapture);

 

element: 이벤트를 등록할 HTML 요소입니다.

event: 등록할 이벤트의 종류를 문자열로 지정합니다.

function: 이벤트 핸들러로 등록할 함수입니다.

useCapture: 이벤트 버블링과 관련된 옵션입니다. 기본값은 false입니다.

 

예를 들어, 버튼을 클릭했을 때 콘솔에 로그를 출력하는 이벤트 핸들러를 등록하고 싶다면 다음과 같이 작성할 수 있습니다.

 

 

<button id="myButton">Click me</button>

 

const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', () => {
    console.log('Button clicked!');
});

 

 

이 코드에서 myButton 변수는 버튼 요소를 가리키고, addEventListener 메소드를 사용하여 'click' 이벤트에 대한 이벤트 핸들러를 등록합니다. 등록된 핸들러 함수는 버튼이 클릭될 때마다 실행되며, console.log 메소드를 사용하여 'Button clicked!' 문자열을 콘솔에 출력합니다.

 

이벤트 핸들러로 등록할 함수는 이름을 가지고 있지 않아도 됩니다. 위 예제에서는 화살표 함수를 사용하여 익명 함수를 생성하고 이를 이벤트 핸들러로 등록했습니다.

 

또한, addEventListener 메소드를 사용하면 이벤트 핸들러를 여러 개 등록할 수 있습니다. 예를 들어, 아래 코드에서는 버튼에 대한 두 개의 이벤트 핸들러를 등록합니다.

 

 

const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', () => {
    console.log('Button clicked!');
});

myButton.addEventListener('mouseover', () => {
    console.log('Mouse over!');
});

 

이 코드에서는 'click' 이벤트와 'mouseover' 이벤트에 대한 두 개의 이벤트 핸들러를 등록합니다. 이벤트가 발생하면 각 핸들러 함수가 실행되며, 각각 'Button clicked!'과 'Mouse over!' 문자열이 콘솔에 출력됩니다.

 

이렇게 addEventListener 메소드를 사용하면 HTML 요소에서 발생하는 다양한 이벤트에 대한 처리를 자유롭게 구현할 수 있습니다.