최신 웹 개발 튜토리얼
 

HTML DOM addEventListener() Method

<문서 객체

예

문서에 클릭 이벤트를 연결합니다. 사용자가 문서 출력의 아무 곳이나 클릭하면 "Hello World" A의 <p> ID = "데모"를 가진 요소 :

document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

document. addEventListener() document. addEventListener() 방법은 문서에 대한 이벤트 핸들러를 첨부.

팁 : 사용하여 문서를. removeEventListener() 메소드는 부착 된 이벤트 핸들러를 제거하기 위해 addEventListener() 방법.

팁 : 사용 요소를. addEventListener() 메소드는 지정된 요소에 이벤트 핸들러를 첨부한다.

브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
addEventListener() 1.0 9.0 1.0 1.0 7.0

참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전, 오페라 6.0 및 이전 버전에서는 지원되지 않습니다. 그러나, 이러한 특정 브라우저 버전, 당신은 사용할 수 attachEvent() 이벤트 핸들러를 연결하는 방법 (see "More Examples" below for a cross-browser solution) .

통사론

document.addEventListener( event , function , useCapture )

매개 변수 값

매개 변수 기술
event 필요합니다. 이벤트의 이름을 지정하는 문자열.

참고 : 사용하지 마십시오 "on" 접두사를. 예를 들어, 사용 "click" 대신 "onclick" .

모든 HTML DOM 이벤트의 목록은 우리가 완전한 보면 HTML DOM 이벤트 객체 참조 .
function 필요합니다. 이벤트가 발생할 때 실행할 수있는 기능을 지정합니다.

이벤트가 발생하면 이벤트 객체는 제 매개 변수 함수로 전달된다. 이벤트 객체의 유형은 특정 이벤트에 따라 달라집니다. 예를 들어, "click" 이벤트는 MouseEvent 객체에 속한다.
useCapture 선택 과목. 이벤트 캡처 또는 버블 링 단계에서 실행할지 여부를 지정하는 부울 값.

가능한 값 :
  • 사실 - 이벤트 핸들러는 캡처 단계에서 실행
  • false- 기본. 이벤트 핸들러는 버블상에서 실행될

기술적 세부 사항

DOM 버전 : DOM 레벨 2 이벤트
반환 값 : 없음 반환 값 없습니다
변경 내역 : useCapture를 매개 변수가 파이어 폭스 6, 오페라 11.60에 선택되었다 (has always been optional for Chrome, IE and Safari)
예

더 예

예

또한 외부 참조 할 수 있습니다 "named" 기능 :

document.addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
»그것을 자신을 시도

예

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

이 예제는 문서에 두 개의 클릭 이벤트를 추가하는 방법을 보여줍니다 :

document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
»그것을 자신을 시도

예

당신은 문서에 서로 다른 유형의 이벤트를 추가 할 수 있습니다.

이 예제는 문서에 많은 이벤트를 추가하는 방법을 보여줍니다

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
»그것을 자신을 시도

예

매개 변수 값을 전달하는 때, 사용 "anonymous function" 매개 변수로 지정된 함수를 호출합니다 :

document.addEventListener("click", function() {
    myFunction(p1, p2);
});
»그것을 자신을 시도

예

문서의 배경 색상 변경 <body> 요소를 :

document.addEventListener("click", function(){
    document.body.style.backgroundColor = "red";
});
»그것을 자신을 시도

예

은 Using removeEventListener() 부착 된 이벤트 핸들러를 제거하는 방법 addEventListener() 방법 :

// Attach an event handler to the document
document.addEventListener("mousemove", myFunction);

// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction);
»그것을 자신을 시도

예

지원하지 않는 브라우저를 들면 addEventListener() 메서드를, 당신은 사용할 수 attachEvent() 메소드를.

이 예제는 크로스 브라우저 솔루션을 보여줍니다

if (document.addEventListener) {                // For all major browsers, except IE 8 and earlier
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) {              // For IE 8 and earlier versions
    document.attachEvent("onclick", myFunction);
}
»그것을 자신을 시도

관련 페이지

자바 스크립트 튜토리얼 : HTML DOM의 EventListener

HTML DOM 참조 : 요소입니다. addEventListener()

<문서 객체