최신 웹 개발 튜토리얼
 

JavaScript HTML DOM의 EventListener

❮ 이전 다음 장 ❯

addEventListener() 메서드

예

사용자가 버튼을 클릭하면 화재 이벤트 리스너를 추가합니다 :

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

addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 연결합니다.

addEventListener() 메소드는 기존의 이벤트 핸들러를 덮어 쓰지 않고 요소에 이벤트 핸들러를 연결합니다.

당신은 하나의 요소에 많은 이벤트 처리기를 추가 할 수 있습니다.

두 즉, 하나의 요소에 같은 종류의 많은 이벤트 핸들러를 추가 할 수 있습니다 "click" 이벤트.

당신은 어떤 DOM 객체뿐만 아니라 HTML 요소에 이벤트 리스너를 추가 할 수 있습니다. 창 개체를 즉.

addEventListener() 메서드는 쉽게 이벤트가 버블 링에 반응하는 방법을 제어 할 수 있습니다.

사용하는 경우 addEventListener() 메소드를 자바 스크립트는 더 나은 가독성을 위해, HTML 마크 업에서 분리하고 HTML 마크 업을 제어하지 않는 경우 당신은 심지어 이벤트 리스너를 추가 할 수 있습니다.

당신은 쉽게 사용하여 이벤트 리스너를 제거 할 수 있습니다 removeEventListener() 메서드를.

통사론

element .addEventListener( event, function, useCapture );

첫 번째 매개 변수는 (같은 이벤트의 유형입니다 "click" 또는 "mousedown" ).

두 번째 매개 변수는 우리가 이벤트가 발생할 때 호출 할 수있는 기능입니다.

세 번째 매개 변수는 이벤트 버블 링 또는 이벤트 캡처를 사용할지 여부를 지정하는 부울 값입니다. 이 매개 변수는 선택 사항입니다.

당신이 사용하지 않는 것이 주 "on" 이벤트에 대한 접두사; 사용 "click" 대신 "onclick" .

요소에 이벤트 처리기 추가

예

경고에 "Hello World!" 시 소자 사용자가 클릭 :

element .addEventListener("click", function(){ alert("Hello World!"); });
»그것을 자신을 시도

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

예

경고에 "Hello World!" 시 소자 사용자가 클릭 :

element .addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}
»그것을 자신을 시도

동일한 요소에 많은 이벤트 처리기 추가

addEventListener() 메서드를 사용하면 기존 이벤트를 덮어 쓰지 않고, 같은 요소에 많은 이벤트를 추가 할 수 있습니다 :

예

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

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

예

element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction);
»그것을 자신을 시도

창 개체에 이벤트 처리기를 추가

addEventListener() 메서드를 사용하면 같은 같은 이벤트를 지원 HTML 요소, HTML 문서, 윈도우 객체 또는 다른 개체로 모든 HTML DOM 객체에 이벤트 리스너를 추가 할 수 있습니다 xmlHttpRequest 객체입니다.

예

사용자가 창 크기를 조절하면 화재 이벤트 리스너를 추가합니다 :

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext ;
});
»그것을 자신을 시도

매개 변수 전달

매개 변수 값을 전달할 때, 매개 변수에 지정된 함수를 호출하는 "익명 함수"를 사용 :

예

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

이벤트 버블 링 또는 이벤트 캡처?

버블 링 및 캡처 HTML DOM의 이벤트 전파의 두 가지 방법이있다.

이벤트 전파는 이벤트가 발생할 때 요소 순서를 정의하는 방법이다. 당신은이 있으면 <p> 내부 요소 <div> 요소를 사용자가 클릭 <p> 요소의 소자, "click" 이벤트가 먼저 처리해야 하는가?

: 버블 링에서 가장 안쪽 요소의 이벤트는 먼저 다음 외부 처리 <p> 요소의 클릭 이벤트가 먼저 처리 한 다음 <div> 요소의 클릭 이벤트를.

캡처에서 가장 외부 요소의 이벤트는 먼저 다음 내부 처리하십시오 <div> 요소의 클릭 이벤트가 먼저 한 후 처리됩니다 <p> 요소의 클릭 이벤트를.

으로 addEventListener() 메서드에는 사용하여 전파 유형을 지정할 수 있습니다 "useCapture" 매개 변수를 :

addEventListener( event , function , useCapture );

디폴트 값은 값이 참으로 설정되는 경우, 기포의 전파를 사용하는 거짓, 이벤트는 캡처 전파를 사용한다.

예

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

removeEventListener() 메서드

removeEventListener() 메소드가 부착 된 이벤트 처리기를 제거 addEventListener() 메서드를 :

예

element .removeEventListener("mousemove", myFunction);
»그것을 자신을 시도

브라우저 지원

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

방법
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

참고 : addEventListener() 과 removeEventListener() 메소드가 IE 8 및 이전 버전과에서 지원되지 않는 Opera 6.0 및 이전 버전을. 그러나, 이러한 특정 브라우저 버전, 당신은 사용할 수 attachEvent() 요소에 이벤트 핸들러를 연결하는 방법을, 그리고 detachEvent() 메소드를 제거하려면 :

element. attachEvent (event, function);
element. detachEvent (event, function);

예

크로스 브라우저 솔루션 :

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 이벤트 객체 참조

모든 HTML DOM 이벤트의 목록은 우리가 완전한 보면 HTML DOM 이벤트 객체 참조 .


❮ 이전 다음 장 ❯