HTML DOM 문서 addEventListener()
예
문서에 클릭 이벤트 추가:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
더 간단한 구문:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
아래에 더 많은 예가 있습니다.
정의 및 사용
이 addEventListener()메서드는 문서에 이벤트 핸들러를 연결합니다.
또한보십시오:
통사론
document.addEventListener(event, function, useCapture)
매개변수
| Parameter | Description |
| event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
| function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
| useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
반환 값
| NONE |
더 많은 예
문서에 많은 이벤트 리스너를 추가할 수 있습니다.
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
다양한 유형의 이벤트를 추가할 수 있습니다.
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
매개변수를 전달할 때 "익명 함수"를 사용하여 매개변수가 있는 함수를 호출합니다.
document.addEventListener("click", function() {
myFunction(p1, p2);
});
문서의 배경색 변경:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
removeEventListener() 메서드 사용:
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
브라우저 지원
document.addEventListenerDOM 레벨 2(2001) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |