HTML DOM addEventListener() 메서드

정의와 사용법

addEventListener() 이벤트 처리기를 요소에 연결하는 방법.

예제

예제 1

<button> 요소에 click 이벤트를 추가하십시오：

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

개인적으로 시도해보세요

예제 2

더 깔끔한 코드:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

개인적으로 시도해보세요

더 많은 예제를 페이지 하단에서 찾을 수 있습니다。

문법

element.addEventListener(type, function, useCapture)

매개변수

매개변수 설명
type

필수입니다. 이벤트의 이름입니다。

"on" 접두사를 사용하지 마십시오。

"click" 대신 "onclick"을 사용하십시오。


DOM 이벤트의 전체 목록
function 필수입니다. 이벤트가 발생할 때 실행되는 함수입니다。
useCapture

선택 사항(기본값 = false)。

  • false - 버블 단계에서 실행되는 처리기。
  • true - 캡처 단계에서 실행되는 처리기。

반환 값

없음。

기술적인 세부 사항

지정된 이벤트 리스너 함수를 현재 노드의 리스너 셋에 추가하여 지정된 유형의 이벤트를 처리하는 메서드입니다. type 이벤트. useCapture true로 설정되면, 리스너가 포획 이벤트 리스너로 등록됩니다. useCapture false로 설정되면 일반 이벤트 리스너로 등록됩니다。

addEventListener()는 여러 번 호출될 수 있으며, 동일한 노드에 동일한 유형의 이벤트에 여러 이벤트 핸들러를 등록할 수 있습니다. 그러나 DOM은 여러 이벤트 핸들러가 호출되는 순서를 확정할 수 없습니다。

이벤트 리스너 함수가 동일한 노드에서 동일한 type 과 useCapture 두 번 등록된 경우 두 번째 등록은 무시됩니다. 노드에서 이벤트를 처리하는 동안에 새로운 이벤트 리스너가 해당 노드에 등록되면, 그 이벤트에 대해 새로운 이벤트 리스너는 호출되지 않습니다。

파라미터로 등록된 경우 Node.cloneNode() 메서드나 Document.importNode() Document.cloneNode() 메서드를 사용하여 Document 노드를 복사할 때, 원래 노드에 등록된 이벤트 리스너는 복사되지 않습니다。

이 메서드도 Document 과 Window 객체에 정의되어 있으며, 유사한 방식으로 작동합니다。

더 많은 예제

예제 3

동일한 요소에 많은 이벤트를 추가할 수 있습니다：

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

개인적으로 시도해보세요

예제 4

동일한 요소에 다양한 이벤트를 추가할 수 있습니다：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

개인적으로 시도해보세요

예제 5

파라미터 값을 전달하려면 "익명 함수"를 사용하세요:

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

개인적으로 시도해보세요

예제 6

<button> 요소의 배경색을 변경하려면:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

개인적으로 시도해보세요

예제 7

버블링과 캡처의 차이:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

개인적으로 시도해보세요

예제 8

이벤트 처리기를 제거하려면:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

개인적으로 시도해보세요

브라우저 지원

element.addEventListener() DOM Level 2 (2001) 기능입니다.

모든 브라우저에서 완전히 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

요소 메서드:

addEventListener() 메서드

removeEventListener() 메서드

문서 메서드:

addEventListener() 메서드

removeEventListener() 메서드

교본:

HTML DOM EventListener

DOM 이벤트의 전체 목록