HTML DOM addEventListener() 메서드

document.addEventListener()이벤트 처리기를 문서에 추가하는 메서드.

사용document.removeEventListener()addEventListener() 메서드와 함께 추가된 이벤트 처리기를 제거하는 메서드.

사용element .addEventListener()메서드는 지정된 요소에 이벤트 처리기를 추가합니다.

문법：

document.addEventListener(event, listener, useCapture)

예제

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

표에서의 숫자는 addEventListener() 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다：

메서드
addEventListener()	1	1	7	1.0	9

파라미터	설명
event	（ 필수 ） 이벤트는 어떤 유효한 JavaScript 이벤트든 될 수 있습니다. 이벤트를 사용할 때 "on" 접두어를 사용하지 않습니다. 예를 들어, "click" 대신 "onclick"을 사용하며, "mousedown" 대신 "onmousedown"을 사용합니다. 모든 HTML DOM 이벤트 목록에 대한 정보는 우리의 완전한HTML DOM 이벤트 객체 참조。
listener	（ 필수 ） 이벤트가 발생할 때 응답할 수 있는 JavaScript 함수입니다. 이벤트가 발생할 때, 이벤트 객체는 함수에 첫 번째 매개변수로 전달됩니다. 이벤트 객체의 유형은 지정된 이벤트에 따릅니다. 예를 들어, "click" 이벤트는 MouseEvent 객체입니다.
useCapture	（ 선택 사항 ） 불리언 값, 이벤트가 캡처 단계에서还是比较 단계에서 실행되는지 지정합니다. 기본值为 false. 가능한 값： true-이벤트 처리기는 캡처 단계에서 실행됩니다 false-이벤트 처리기는 버블 단계에서 실행됩니다 우리의JavaScript 이벤트 전파 튜토리얼에서이벤트 전파에 대한更多信息를 읽으십시오

반환 값：	없음
DOM 버전：	DOM 2급

클릭 이벤트를 문서에 추가하세요. 사용자가 문서의 어느 위치를 클릭하면 <p> 요소에서 id="para"를 사용하여 "Hello World" 출력하십시오：

예제

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});

이 예제는 외부 "이름" 함수를 참조합니다：

예제

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

문서에 많은 이벤트를 추가할 수 있습니다. 기존 이벤트를 덮어쓰지 않습니다：

예제

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);

다양한 유형의 이벤트를 문서에 추가할 수 있습니다:

예제

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);

매개변수 값을 전달할 때, 익명 함수를 사용하여 지정된 함수를 매개변수로 호출하세요:

예제

document.addEventListener("click",　function()　{
myFunc(x,　y);
});

JavaScript 가이드:이벤트 리스너

JavaScript 가이드:이벤트 전파