Latest web development tutorials

HTML DOM addEventListener () 메서드

문서 객체 참조 문서 객체

예

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

document.addEventListener ({) (함수를 "클릭"
. 중요 document.getElementById는 innerHTML을 = "안녕하세요"( "데모");
});

»시도

정의 및 사용

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

팁 : 사용할 수 document.removeEventListener () 이벤트 핸들러를 추가 addEventListener () 메서드를 제거하는 방법.

팁 : . 요소하여 addEventListener () 이벤트 핸들러 메소드 지정된 요소.

브라우저 지원

표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.

방법
하여 addEventListener () 1.0 9.0 1.0 1.0 7.0

참고 : 인터넷 익스플로러 8과 IE 이전 버전의 addEventListener () 메서드를 지원하지 않습니다, 오페라 7.0 및 이전 버전의 오페라를 지원하지 않습니다. 그러나, 브라우저 버전이 유형의 이벤트 처리기를 추가 할 수는 attachEvent () 메소드를 사용할 수있다 (크로스 브라우저 호환성 문제는 "더 많은 예제"를 볼 수 있습니다).

문법

document.addEventListener (이벤트, 함수, useCapture를)

매개 변수 값

매개 변수 기술
행사 필요합니다. 이벤트 설명의 문자열 이름입니다.

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

팁 : 모든 HTML DOM 이벤트, 당신은 우리의 완전한 볼 수있는 HTML DOM 이벤트 객체 참조 .
기능 필요합니다. 이는 이벤트가 트리거 기능 후에 설명한다.

이벤트가 트리거되면, 제 인수로 이벤트 객체 함수에 전달. 유형 이벤트 객체는 특정 이벤트에 따라 달라집니다. 예를 들어, 이벤트가 된 MouseEvent (마우스 이벤트) 개체에 속하는 "클릭".
useCapture를 선택 사항. 이벤트 캡처에서 실행 또는 버블 링 단계 여부를 지정하는 부울 값입니다.

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

기술 세부 사항

DOM 버전 : DOM 레벨 2 이벤트
반환 값 : 없음 반환 값 없음
기록 : 파이어 폭스 6, useCapture를 오페라 11.60에서 매개 변수는 선택 사항입니다. (크롬, IE, 사파리는 항상 선택하고있다).

더 많은 예제

예

넌 함수명 외부 기능으로 지칭 될 수있다 :

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

myFunction 함수 () {
. 중요 document.getElementById는 innerHTML을 = "안녕하세요"( "데모");
}

»시도

예

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

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

document.addEventListener (하여 myFunction "를 클릭");
document.addEventListener (someOtherFunction "을 클릭합니다");

»시도

예

사용자는 문서 내의 다양한 종류의 이벤트를 추가 할 수있다.

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

document.addEventListener ( "마우스 오버"하여 myFunction);
document.addEventListener (someOtherFunction "을 클릭합니다");
document.addEventListener ( "로 마우스", someOtherFunction);

»시도

예

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

document.addEventListener ({) (함수를 "클릭"
하여 myFunction (P1, P2);
});

»시도

예

수정 <몸> 배경의 요소 :

document.addEventListener ({) (함수를 "클릭"
document.body.style.backgroundColor = "빨강";
});

»시도

예

이벤트 처리기를 추가 addEventListener () 메서드를 통해 제거 removeEventListener () 메서드를 사용하여 :

문서에 이벤트 핸들러 추가 //
document.addEventListener ( "MouseMove 이벤트"하여 myFunction);

문서 이벤트 핸들러를 제거 //
document.removeEventListener ( "MouseMove 이벤트"하여 myFunction);

»시도

예

브라우저에서 addEventListener () 메서드를 지원하지 않는 경우, 대신는 attachEvent () 메서드를 사용할 수 있습니다.

다음 예는 브라우저 간 솔루션을 보여

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

»시도

관련 페이지

자바 스크립트 튜토리얼 : 표시되는 HTML DOM에의 EventListener

자바 스크립트 참조 설명서 : 요소 .addEventListener ()

문서 객체 참조 문서 객체