자바 스크립트 HTML DOM의 EventListener

이전 : 자바 스크립트 예약 키워드

다음 : 자바 스크립트 JSON

addEventListener () 메서드

예

이벤트 듣기 사용자가 버튼을 클릭 할 때 트리거 :

. 중요 document.getElementById ( "myBtn")하여 addEventListener ( "클릭", displayDate);

»시도

addEventListener () 메서드는 지정된 요소에 이벤트 처리기를 추가하는 데 사용됩니다.

기존의 이벤트 핸들러를 덮어 쓰지 않습니다 이벤트 처리기를 추가 할 수 addEventListener () 메서드.

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

두 개의 "클릭"이벤트 : 당신과 같은 동일한 요소에 이벤트 핸들러의 동일한 유형의 하나 이상을 추가 할 수있다.

당신은 어떤 DOM 이벤트 리스너에뿐만 아니라 HTML 요소를 객체를 추가 할 수 있습니다. 예를 들면 : 윈도우 객체입니다.

addEventListener () 메서드보다 쉽게 이벤트 (버블 링과 캡처)를 제어 할 수 있습니다.

당신은 또한 이벤트 리스너를 추가 할 수 있습니다 제어 HTML 태그가없는 경우, 더 읽기, 개척 왼쪽에서 addEventListener () 메서드, 자바 스크립트 HTML 태그를 사용합니다.

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

문법

요소 .addEventListener (이벤트, 함수, useCapture를 );

첫 번째 매개 변수는 이벤트 (예 : "에서 MouseDown"를 "클릭"또는) 유형이다.

두 번째 인수는 함수 호출 이벤트 이후에 발생된다.

세번째 파라미터는 이벤트 기포 또는 포획을 설명하는 데 사용되는 부울 값이다. 이 매개 변수는 선택 사항입니다.

	참고 : "에"접두어를 사용하지 마십시오. 예를 들어, 사용하는 대신에, "onclick을"을 "클릭".

원본 요소는 이벤트 핸들러를 추가

예

사용자는 팝업 요소를 클릭하면 "안녕하세요!"

요소 .addEventListener ( "클릭"기능 () {경고 ( "안녕하세요!");});

»시도

당신은 외부 함수를 참조하는 함수 이름을 사용할 수 있습니다 :

예

사용자는 팝업 요소를 클릭하면 "안녕하세요!"

요소 .addEventListener (하여 myFunction "를 클릭" );

myFunction 함수 () {
경고 ( "안녕하세요!");
}

»시도

같은 요소에 여러 이벤트 처리기를 추가

addEventListener () 메서드는 동일한 요소에 여러 이벤트를 추가 할 수 있습니다, 기존 이벤트를 덮어 쓰지 않습니다 :

예

요소 .addEventListener (하여 myFunction "를 클릭" );
요소 .addEventListener (mySecondFunction "을 클릭합니다" );

»시도

당신은 다양한 종류의 이벤트로 같은 요소를 추가 할 수 있습니다 :

예

요소 .addEventListener ( "마우스 오버"하여 myFunction );
요소 .addEventListener (mySecondFunction "을 클릭합니다" );
요소 .addEventListener ( "로 마우스", myThirdFunction );

»시도

Window 객체에 이벤트 처리기를 추가

addEventListener () 메서드는 사용자가 HTML DOM 이벤트 리스너 개체를 추가 할 수 있습니다, HTML DOM은 객체와 같은 : HTML 요소, HTML 문서, 윈도우 객체. 이벤트 객체 나 같은 기타 비용 : XMLHttpRequest 객체.

예

때 사용자는 이벤트 리스너를 추가하기 위해 창 크기를 다시 설정합니다 :

window.addEventListener은 ({) (, 기능을 "크기 조정"
. 중요 document.getElementById는 innerHTML을 ( "데모") = sometext;
});

»시도

매개 변수 전달

매개 변수 값을 전달하는 경우, 파라미터 "익명 함수"로 함수 호출을 사용

예

요소 .addEventListener ( "클릭"기능 () {하여 myFunction (P1, P2);});

»시도

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

두 가지 방법으로 이벤트 전달 : 버블 링과 캡처.

이벤트 트리거 정의 요소 이벤트 전달 순서. 당신은 <P>는 <div> 요소에 요소는 사용자가 클릭 <P> 요소의 "클릭"이벤트의 요소가 트리거 될 경우?

다음 클릭 이벤트 <div> 요소를 유발, 클릭 이벤트 <P> 요소 첫 번째 트리거 : 버블 링 이벤트는 즉, 외부 요소를 트리거, 내부 요소가 트리거 될 것입니다.

클릭 이벤트를 트리거 한 다음 클릭 이벤트 <P> 요소를 트리거하는 <div> 요소 : 캡처, 이벤트는 외부 요소, 이벤트가 트리거 내부 요소, 즉 트리거 될 수 있습니다.

addEventListener () 메서드는 전달 유형을 설정하는 "useCapture를"매개 변수를 지정합니다 :

하여 addEventListener (이벤트, 함수, useCapture를) ;

디폴트 값은 그 값이 참이면, 전송을 캡처하는 이벤트를 사용하여 통과하는 버블 링하고, 거짓.

예

. 중요 document.getElementById ( "myDiv")하여 addEventListener ( "클릭"하여 myFunction, TRUE);

»시도

은 removeEventListener () 메소드

은 removeEventListener () 이벤트 핸들러를 추가 addEventListener () 메서드를 제거하는 방법

예

요소 .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

참고 : IE 8과 IE의 이전 버전, 오페라 7.0 및 이전 버전하여 addEventListener ()와 removeEventListener ()를 사용하는 방법을 지원하지 않습니다. 그러나, 브라우저 버전이 유형의 이벤트 핸들러를 제거 detachEvent () 메소드를 사용할 수있다 :

element.attachEvent (이벤트, 기능);
element.detachEvent (이벤트, 기능);

예

크로스 브라우저 솔루션 :

VAR X = document.getElementById를 ( "myBtn");
경우 (x.addEventListener) {// IE 8 및 이전 버전을 제외한 모든 주요 브라우저,
x.addEventListener (하여 myFunction "를 클릭");
} 그렇지 않은 경우 (x.attachEvent) {// IE 8 및 이전 버전의 경우
x.attachEvent ( "온 클릭"하여 myFunction);
}

»시도

HTML DOM 이벤트 객체 참조

모든 HTML DOM 이벤트, 당신은 우리의 완전한 볼 수 있습니다 HTML DOM 이벤트 객체 참조 .

이전 : 자바 스크립트 예약 키워드

다음 : 자바 스크립트 JSON

JavaScript 코스

JS 기능

JS HTML DOM

JS 고급 자습서

JS 브라우저 BOM

JS 창고

JS 예

JS 참조 설명서