최신 웹 개발 튜토리얼
 

HTML DOM addEventListener() Method

<요소 개체

예

에 클릭 이벤트를 붙이는 <button> 요소입니다. 사용자가 버튼을, 출력을 클릭하면 "Hello World" A의 <p> ID = "데모"를 가진 요소 :

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

더 "Try it Yourself" 아래의 예.

정의 및 사용

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) .

통사론

element .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" 기능.

이 예에서는 사용자가 클릭 할 때 기능을 실행하는 방법을 보여 <button> 요소 :

document.getElementById("myBtn").addEventListener("click", myFunction);

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

예

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

이 예는 같은 두 클릭 이벤트를 추가하는 방법을 보여줍니다 <button> 요소 :

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

예

동일한 요소에 다른 유형의 이벤트를 추가 할 수 있습니다.

이 예는 동일한에 많은 이벤트를 추가하는 방법을 보여줍니다 <button> 요소 :

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

예

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

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

예

a의 배경 색상 변경 <button> 요소를 :

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

예

버블 링과 캡처 사이의 차이를 보여주기 위해 선택 useCapture를 매개 변수를 사용 :

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

예

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

// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

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

예

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

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

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

관련 페이지

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

HTML DOM 참조 : 문서. addEventListener()

<요소 개체