JavaScript HTML DOM 이벤트 리스너

addEventListener() 메서드

예제

사용자가 버튼을 클릭할 때 발생하는 이벤트를 추가하는 이벤트 리스너를 추가합니다：

document.getElementById("myBtn").addEventListener("click", displayDate);

직접 테스트해 보세요

addEventListener() 지정된 요소에 지정된 이벤트 처리기를 추가합니다.

addEventListener() 기존 이벤트 처리기를 덮어쓰지 않고 요소에 이벤트 처리기를 추가하는 방법입니다.

한 요소에 여러 이벤트 처리기를 추가할 수 있습니다.

같은 유형의 이벤트 처리기를 여러 개 추가할 수 있습니다. 예를 들어 두 개의 "click" 이벤트.

HTML 요소뿐만 아니라 어떤 DOM 객체에도 이벤트 처리기를 추가할 수 있습니다. 예를 들어 window 객체.

addEventListener() 메서드를 사용하면

메서드를 사용하면 이벤트가 어떻게 버블링에 반응할지 더 쉽게 제어할 수 있습니다。 addEventListener() 메서드를 사용할 때

메서드를 사용할 때, JavaScript와 HTML 표시는 더 나은 가독성을 위해 분리됩니다；HTML 표시를 제어하지 않는 경우에도 이벤트 리스너를 추가할 수 있습니다。 removeEventListener() 이 메서드는 이벤트 리스너를 쉽게 제거할 수 있습니다。

문법

element.addEventListener(event, function, useCapture);

첫 번째 파라미터는 이벤트 유형입니다. 예를 들어 "click" 또는 "mousedown".

두 번째 파라미터는 이벤트가 발생할 때 호출해야 할 함수입니다。

세 번째 파라미터는 이벤트가 발생할 때 호출해야 할 함수입니다. 이 파라미터는 선택 사항입니다。

주의:이벤트에 "on" 접두사를 사용하지 마세요； "onclick" 대신 "click"를 사용하세요。

요소에 이벤트 처리기를 추가

예제

사용자가 어떤 요소를 클릭할 때 "Hello World!"을 표시합니다：

element.addEventListener("click", function(){ alert("Hello World!"); });

직접 테스트해 보세요

외부 "이름 지정" 함수를 호출할 수도 있습니다：

예제

사용자가 어떤 요소를 클릭할 때 "Hello World!"을 표시합니다：

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

직접 테스트해 보세요

같은 요소에 여러 이벤트 처리기를 추가

addEventListener() 이 메서드는 같은 요소에 여러 이벤트를 추가할 수 있으며 기존 이벤트를 덮어쓰지 않도록 합니다：

예제

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

직접 테스트해 보세요

같은 요소에 다른 유형의 이벤트를 추가할 수 있습니다：

예제

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

직접 테스트해 보세요

Window 객체에 이벤트 처리기를 추가

addEventListener() HTML DOM 객체, 예를 들어 HTML 요소, HTML 객체, window 객체 또는 이벤트를 지원하는 다른 객체에 이벤트 리스너를 추가할 수 있습니다. 예를 들어 xmlHttpRequest 객체.

예제

사용자가 창 크기를 조정할 때 발생하는 이벤트 리스너를 추가합니다：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

직접 테스트해 보세요

파라미터 전달

파라미터 값을 전달할 때는 호출된 함수의 "익명 함수"를 매개변수로 사용하여 전달합니다:

예제

element.addEventListener("click", function(){ myFunction(p1, p2); });

직접 테스트해 보세요

이벤트 파이프 또는 이벤트 캡처?

HTML DOM에서는 두 가지 이벤트 전파 방법이 있습니다: 파이프와 캡처.

이벤트 전파는 이벤트가 발생할 때 요소의 순서를 정의하는 방법입니다. <div> 요소 내에 <p> 요소가 있고, 사용자가 이 <p> 요소를 클릭하면, 먼저哪个元素的“click”事件应该首先处理？

파이프에서, 가장 내층 요소의 이벤트가 먼저 처리되고, 그 다음 더 외층의 요소: 먼저 <p> 요소의 클릭 이벤트를 처리하고, 그 다음 <div> 요소의 클릭 이벤트를 처리합니다.

캡처에서, 가장 외층 요소의 이벤트가 먼저 처리되고, 그 다음 더 내층의 요소: 먼저 <div> 요소의 클릭 이벤트를 처리하고, 그 다음 <p> 요소의 클릭 이벤트를 처리합니다.

addEventListener() 메서드에서, "useCapture" 매개변수를 사용하여 전파 유형을 지정할 수 있습니다:

addEventListener(event, function, useCapture);

기본 값은 false이 경우, 파이프 전파를 사용합니다. true이 경우, 이벤트는 캡처 전파를 사용합니다.

예제

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

직접 테스트해 보세요

removeEventListener() 메서드

removeEventListener() removeEventListener() 메서드를 통해 추가된 addEventListener() 메서드에 추가된 이벤트 처리기:

예제

element.removeEventListener("mousemove", myFunction());

직접 테스트해 보세요

브라우저 지원

표의 숫자는 이러한 메서드를 완전히 지원하는 최초 브라우저 버전을 정의합니다.

메서드
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

주의사항:IE 8, Opera 6.0 및 이전 버전은 지원하지 않습니다. addEventListener() 과 removeEventListener() 메서드. 그러나, 이러한 특별한 브라우저 버전에 대해서는 사용할 수 있습니다. attachEvent() 메서드는 요소에 이벤트 처리기를 추가하고 detachEvent() 메서드 제거:

element.attachEvent(event, function);
element.detachEvent(event, function);

예제

크로스 브라우저 솔루션:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // IE 8 및 이전 버전을 제외한 주요 브라우저에 대한
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 및 이전 버전에 대한
    x.attachEvent("onclick", myFunction);
}

직접 테스트해 보세요

HTML DOM 이벤트 객체 참조 가이드

모든 HTML DOM 이벤트 목록을 확인하려면, 우리의 완전한 HTML DOM 이벤트 객체 참조 가이드.