HTML DOM addEventListener () 메서드
예
<버튼>에 요소는 클릭 이벤트를 추가합니다. 사용자는 아이디의 <p> 요소 출력에 "Hello World"의 = "데모"버튼을 클릭하면 :
. 중요 document.getElementById는 innerHTML을 = "안녕하세요"( "데모");
});
»시도
정의 및 사용
addEventListener () 메서드는 지정된 요소에 이벤트 처리기를 추가하는 데 사용됩니다.
팁 : 사용 은 removeEventListener () 이벤트 핸들러를 추가 addEventListener () 메서드를 제거하는 방법.
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
| 방법 | |||||
|---|---|---|---|---|---|
| 하여 addEventListener () | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
참고 : 인터넷 익스플로러 8과 IE 이전 버전의 addEventListener를 지원하지 않습니다 () 메소드 ,, 오페라 7.0 및 이전 버전의 오페라를 지원하지 않습니다. 그러나 브라우저의 기능을 지원하지 않습니다, 당신은 (크로스 브라우저 솔루션에 대한 "추가 예"참조) 이벤트 핸들러를 추가 할 수는 attachEvent () 메서드를 사용할 수 있습니다.
문법
매개 변수 값
| 매개 변수 | 기술 |
|---|---|
| 행사 | 해야합니다. 이벤트의 이름을 지정하는 문자열입니다. 참고 : "에"접두어를 사용하지 마십시오. 예를 들어, 사용하는 대신에, "onclick을"을 "클릭". 팁 : 모든 HTML DOM 이벤트, 당신은 우리의 완전한 볼 수있는 HTML DOM 이벤트 객체 참조 . |
| 기능 | 해야합니다. 지정된 이벤트가 트리거 할 때 기능을 수행 할 수 있습니다. 첫 번째 인수로 이벤트 객체는 함수에 전달합니다. 유형 이벤트 객체는 특정 이벤트에 따라 달라집니다. 예를 들어, 이벤트가 된 MouseEvent (마우스 이벤트) 개체에 속하는 "클릭". |
| useCapture를 | 선택 사항. 이벤트 캡처에서 실행 또는 버블 링 단계 여부를 지정하는 부울 값입니다. 가능한 값 :
|
기술 세부 사항
| DOM 버전 : | DOM 레벨 2 이벤트 |
|---|---|
| 반환 값 : | 없음 반환 값 없음 |
| 기록 : | 파이어 폭스 6, useCapture를 오페라 11.60에서 매개 변수는 선택 사항입니다. (크롬, IE, 사파리는 항상 선택하고있다). |
더 많은 예제
예
당신은 함수 이름으로 외부 함수를 참조 할 수 있습니다.
이 예에서는 사용자가 클릭 <버튼> 요소의 기능을 수행하는 방법을 보여줍니다
myFunction 함수 () {
. 중요 document.getElementById는 innerHTML을 = "안녕하세요"( "데모");
}
»시도
예
기존 이벤트를 덮어 쓰지 않습니다 이벤트를 추가, 문서에서 많은 이벤트를 추가 할 수 있습니다.
이 예는 <버튼> 요소에 두 개의 클릭 이벤트를 추가하는 방법을 보여줍니다
. 중요 document.getElementById (이하 "myBtn")하여 addEventListener (someOtherFunction "을 클릭합니다");
»시도
예
동일한 요소에 다양한 종류의 이벤트를 추가 할 수 있습니다.
이 예는 <버튼> 요소와 여러 이벤트를 추가하는 방법을 보여줍니다
. 중요 document.getElementById (이하 "myBtn")하여 addEventListener (someOtherFunction "을 클릭합니다");
. 중요 document.getElementById ( "myBtn")하여 addEventListener ( "로 마우스", someOtherFunction);
»시도
예
매개 변수 값을 전달하는 경우, 파라미터 "익명 함수"로 함수 호출을 사용
하여 myFunction (P1, P2);
});
»시도
예
<버튼> 요소의 배경을 수정합니다 :
this.style.backgroundColor = "빨강";
});
»시도
예
다른 useCapture를 버블 링과 캡처 단계를 보여주기 위해 선택적 매개 변수를 사용하여
»시도
예
이벤트 처리기를 추가 addEventListener () 메서드를 제거 removeEventListener () 메서드를 사용하여 :
. 중요 document.getElementById ( "myDIV")하여 addEventListener ( "MouseMove 이벤트"하여 myFunction);
// <DIV> 이벤트 핸들러를 제거
. 중요 document.getElementById ( "myDIV")은 removeEventListener ( "MouseMove 이벤트"하여 myFunction);
»시도
예
브라우저에서 addEventListener () 메서드를 지원하지 않는 경우, 대신는 attachEvent () 메서드를 사용할 수 있습니다.
다음 예는 브라우저 간 솔루션을 보여
경우 (x.addEventListener) {// 모든 IE 8을 제외한 주요 브라우저 및 IE의 이전 버전
x.addEventListener (하여 myFunction "를 클릭");
} 경우 그렇지 않은 경우 (x.attachEvent) {// IE 8과 IE의 이전 버전
x.attachEvent ( "온 클릭"하여 myFunction);
}
»시도
관련 페이지
자바 스크립트 튜토리얼 : 표시되는 HTML DOM에의 EventListener
자바 스크립트 참조 설명서 : document.addEventListener ()