JavaScript는 EventListener를 사용하여 HTML DOM_Basic 지식을 작동합니다.

addEventListener() 메소드
예시
사용자가 버튼을 클릭하면 청취 이벤트가 트리거됩니다.

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.
addEventListener() 메서드에 의해 추가된 이벤트 핸들러는 기존 이벤트 핸들러를 덮어쓰지 않습니다.
요소에 여러 이벤트 핸들러를 추가할 수 있습니다.
두 개의 "클릭" 이벤트와 같이 동일한 유형의 여러 이벤트 핸들러를 동일한 요소에 추가할 수 있습니다.
HTML 요소뿐만 아니라 모든 DOM 객체에 이벤트 리스너를 추가할 수 있습니다. 예: 창 개체.
addEventListener() 메서드를 사용하면 이벤트(버블링 및 캡처)를 더 쉽게 제어할 수 있습니다.
addEventListener() 메서드를 사용하면 JavaScript가 HTML 마크업과 분리되어 가독성이 높아지고 HTML 마크업을 제어하지 않고도 이벤트 리스너를 추가할 수 있습니다.
RemoveEventListener() 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.
문법

element.addEventListener(event, function, useCapture);

첫 번째 매개변수는 이벤트 유형(예: "click" 또는 "mousedown")입니다.
두 번째 매개변수는 이벤트가 발생한 후 호출되는 함수입니다.
세 번째 매개변수는 이벤트 버블링 또는 캡처 여부를 설명하는 데 사용되는 부울 값입니다. 이 매개변수는 선택사항입니다.
참고: "on" 접두어를 사용하지 마십시오. 예를 들어 "onclick" 대신 "click"을 사용합니다.

원본 요소에 이벤트 핸들러 추가
예시
사용자가 요소를 클릭하면 "Hello World!"가 나타납니다.

element.addEventListener("click", function(){ alert("Hello World!"); });

함수 이름을 사용하여 외부 함수를 참조할 수 있습니다.
예시
사용자가 요소를 클릭하면 "Hello World!"가 나타납니다.

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

동일한 요소에 여러 이벤트 핸들러 추가
addEventListener() 메서드를 사용하면 기존 이벤트를 덮어쓰지 않고도 동일한 요소에 여러 이벤트를 추가할 수 있습니다.
예시

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

동일한 요소에 다양한 유형의 이벤트를 추가할 수 있습니다.
예시

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

창 개체에 이벤트 핸들러 추가
addEventListener() 메서드를 사용하면 HTML 요소, HTML 문서 및 창 객체와 같은 HTML DOM 객체에 이벤트 리스너를 추가할 수 있습니다. 또는 xmlHttpRequest 객체와 같은 기타 지출 이벤트 객체.
예시
사용자가 창 크기를 재설정할 때 이벤트 리스너를 추가합니다.

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

매개변수 전달
매개변수 값을 전달할 때 "익명 함수"를 사용하여 매개변수가 있는 함수를 호출하세요.
예시

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

이벤트 버블링 또는 이벤트 캡처?
이벤트 전달 방법에는 버블링과 캡처라는 두 가지 방법이 있습니다.
이벤트 전달은 요소 이벤트가 실행되는 순서를 정의합니다.

요소를

요소에 삽입하고 사용자가

요소를 클릭하면 어떤 요소의 '클릭' 이벤트가 먼저 실행되나요?
버블링에서는 내부 요소의 이벤트가 먼저 트리거된 다음 외부 요소가 트리거됩니다. 즉,

요소의 클릭 이벤트가 먼저 트리거된 다음

트리거됩니다.
캡처에서는 외부 요소의 이벤트가 먼저 트리거된 다음 내부 요소의 이벤트가 트리거됩니다. 즉,

요소의 클릭 이벤트가 먼저 트리거된 다음

요소가 트리거됩니다.
addEventListener() 메소드는 "useCapture" 매개변수를 지정하여 전달 유형을 설정할 수 있습니다.

addEventListener(event, function, useCapture);

기본값은 false이며, 이는 버블 전달을 의미합니다. 값이 true이면 캡처를 사용하여 이벤트가 전달됩니다.
예시
document.getElementById("myDiv").addEventListener("click", myFunction, true);

해 보세요. »

removeEventListener() 메소드
RemoveEventListener() 메서드는 addEventListener() 메서드에 의해 추가된 이벤트 핸들러를 제거합니다.
예시

element.removeEventListener("mousemove", myFunction);

브라우저 지원
표의 숫자는 이 방법을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

참고: IE 8 및 이전 IE 버전, Opera 7.0 및 이전 버전은 addEventListener() 및 RemoveEventListener() 메서드를 지원하지 않습니다. 그러나 이러한 브라우저 버전의 경우 detachEvent() 메서드를 사용하여 이벤트 핸들러를 제거할 수 있습니다.

element.attachEvent(event, function);
element.detachEvent(event, function);

예
브라우저 간 해결 방법:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);