HTML DOM 요소 addEventListener()
예
<button> 요소에 클릭 이벤트 추가:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
더 간결한 코드:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
아래에 더 많은 예가 있습니다.
정의 및 사용
이 addEventListener()
메서드는 이벤트 핸들러를 요소에 연결합니다.
또한보십시오:
element.removeEventListener() 메서드
document.addEventListener() 메서드
document.removeEventListener() 메서드
튜토리얼
통사론
element.addEventListener(event, function, useCapture)
매개변수
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
반환 값
없음 |
더 많은 예
동일한 요소에 여러 이벤트를 추가할 수 있습니다.
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
동일한 요소에 다른 이벤트를 추가할 수 있습니다.
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
매개변수 값을 전달하려면 "익명 함수"를 사용하십시오.
element.addEventListener("click", function() {
myFunction(p1, p2);
});
<button> 요소의 배경색 변경:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
버블링과 캡처의 차이점:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
이벤트 핸들러 제거:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
브라우저 지원
element.addEventListener()
DOM 레벨 2(2001) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |