HTML DOM Document addEventListener() 메서드

정의와 사용법

addEventListener() 이벤트 처리기를 문서에 추가하는 메서드.

예제

예제 1

문서에 click 이벤트 추가:

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

직접 시도해 보세요

간단한 문법:

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

직접 시도해 보세요

예제 2

문서에 여러 이벤트 리스너를 추가할 수 있습니다:

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

직접 시도해 보세요

예제 3

다른 유형의 이벤트를 추가할 수 있습니다:

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

직접 시도해 보세요

예제 4

파라미터를 전달할 때, 매개변수를 가진 함수를 "익명 함수" 호출하여 사용하십시오:

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

직접 시도해 보세요

예제 5

문서의 배경색 변경:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

직접 시도해 보세요

예제 6

removeEventListener() 메서드를 사용하여:

// 이벤트 리스너 추가
document.addEventListener("mousemove", myFunction);
// 이벤트 리스너 제거
document.removeEventListener("mousemove", myFunction);

직접 시도해 보세요

문법

document.addEventListener(type, function, capture)

파라미터

파라미터 설명
type

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

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

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

모든 HTML DOM 이벤트는 다음과 같이 나열되어 있습니다:

HTML DOM 이벤트 객체 참조 매뉴얼
function

필수입니다. 일어나는 일에 대해 실행되는 함수입니다.

이벤트가 발생할 때, 이벤트 객체를 함수에 첫 번째 매개변수로 전달합니다.

이벤트 객체의 유형은 지정된 이벤트에 따릅니다. 예를 들어, "click" 이벤트는 MouseEvent 객체에 속합니다.
capture

선택 사항(기본 값 = false)

  • true - 캡처 단계에서 처리자가 실행됨
  • false - 버블 단계에서 처리자가 실행됨

반환 값

없음.

기술 세부 사항

이 메서드는 지정된 이벤트 리스너 함수를 현재 노드의 리스너 셋에 추가하여 지정된 type의 이벤트를 처리합니다. 만약 capture true로 설정되면 리스너가 캡처 이벤트 리스너로 등록됩니다. 만약 capture false로 설정되면 일반 이벤트 리스너로 등록됩니다.

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

이벤트 리스너 함수가 동일한 노드에서 동일한 type과 capture 파라미터가 두 번 등록되면 두 번째 등록은 무시됩니다. 노드에서 이벤트를 처리하는 동안 해당 노드에 새로운 이벤트 리스너가 등록되면 새로운 이벤트 리스너는 해당 이벤트를 호출하지 않습니다.

이를 통해 Node.cloneNode() 메서드 또는 Document.importNode() Document.cloneNode() 메서드는 원본 노드에 등록된 이벤트 리스너를 복사하지 않습니다.

이 메서드는 Document와 Window 객체에도 정의되어 있으며, 작동 방식이 유사합니다.

브라우저 지원

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

모든 브라우저가 완전히 지원합니다:

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

관련 페이지

요소 메서드

addEventListener() 메서드

removeEventListener() 메서드

문서 메서드

addEventListener() 메서드

removeEventListener() 메서드

교본

HTML DOM 이벤트 리스너

전체 DOM 이벤트 목록