English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
element.addEventListener()지정된 요소에 이벤트 처리기를 추가하는 메서드입니다.
사용:element.removeEventListener()addEventListener() 메서드와 함께 추가된 이벤트 처리기를 제거하는 메서드입니다.
사용:document.addEventListener()메서드는 이벤트 처리기를 문서에 추가합니다.
element.addEventListener(event, listener, useCapture)
var x = document.querySelector("button");
x.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. 가능한 값：
우리의JavaScript 이벤트 전파 강의에서이벤트 전파에 대한更多信息를 읽어보세요 |
| 반환 값： | 없음 |
|---|---|
| DOM 버전： | DOM 2급 |
이 예제는 외부 "이름" 함수를 참조합니다：
document.querySelector("button").addEventListener("click", myFunc);
function myFunc() {
document.body.style.backgroundColor = "coral";
}테스트해보세요‹/›요소에 많은 이벤트를 추가할 수 있으며 기존 이벤트를 덮어쓰지 않습니다：
document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);테스트해보세요‹/›대상 요소에 다양한 유형의 이벤트를 추가할 수 있습니다：
document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);테스트해보세요‹/›파라미터 값을 전달할 때, 익명 함수를 사용하여 지정된 함수를 매개변수로 호출하세요:
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});테스트해보세요‹/›JavaScript 튜토리얼:이벤트 리스너
JavaScript 튜토리얼:이벤트 전파
HTML DOM 참조:element.removeEventListener()
HTML DOM 참조:document.addEventListener()