English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
JavaScript 이벤트 처리기의 최신 기능은 이벤트 리스닝입니다. 이벤트 리스닝은 요소에 이벤트를 감지합니다：
사용할 것입니다addEventListener()메서드를 사용하여 요소에 이벤트를 직접 할당하는 대신 추가합니다：
addEventListener()메서드는 지정된 요소에 이벤트 처리기를 추가합니다：
이전 장에서 소개한 랜덤 색상 예제를 다시 작성할 수 있습니다. 예를 들어:
document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
let color = "rgb(" + random(255) + ", + random(255) + ", + random(255) + ")";
document.body.style.backgroundColor = color;
para.innerHTML = "Hello world";테스트를 보세요‹/›그래서 여전히이전에도동일한bgChange()함수를 사용하여,addEventListener()메서드를 버튼에 추가합니다：
addEventListener() 두 개의 필수 매개변수를 받습니다：-감지할 이벤트와 리스너 콜백 함수：
이 메서드는 이전 장에서 설명한 이벤트 처리기 속성과 유사하지만 문법이 다릅니다：
element.addEventListener(event, listener, useCapture)
첫 번째 매개변수는 이벤트의 유형입니다(예: "click" 또는 "mousemove").
두 번째 매개변수는 이벤트가 발생할 때 호출할 리스너 함수입니다：
세 번째 매개변수는 이벤트가 퍼블릭이 되거나 캡처될지 지정하는 부울 값입니다. 이 매개변수는 선택 사항입니다：
주의하세요. 이벤트에 "on" 프리كس를 사용하지 마세요. "click" 대신 "onclick"을 사용하세요：
모든 코드를 넣을 때 주의하세요：addEventListener()함수 내의 익명 함수는 매우 적합합니다. 예를 들어:
let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});테스트를 보세요‹/›또한 외부 "이름" 함수를 인용할 수 있습니다：
let para = document.querySelector("#para");
let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
para.innerHTML = "Hello world";테스트를 보세요‹/›여러 개의 이벤트 리스너를 동일한 요소에 추가
乍一看，이벤트 리스너는 이벤트 처리기 속성과 매우 유사하지만, 몇 가지 장점이 있습니다. 동일한 요소에 여러 개의 이벤트 리스너를 설정할 수 있습니다. 다음 예제를 참고하세요：
document.querySelector("button").addEventListener("click", myFunc);테스트를 보세요‹/›document.querySelector("button").addEventListener("click", anotherFunc);
요소에 다양한 유형의 이벤트를 추가할 수 있습니다：1document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("mouseenter", myFunc2document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("click", myFunc3document.querySelector("button").addEventListener("mouseout", myFunc테스트를 보세요‹/›파라미터 전달
파라미터 값을 전달할 때, 파라미터를 사용하여 지정된 함수를 호출하는 익명 함수를 사용하십시오：
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
});테스트를 보세요‹/›이벤트 리스너를 추가할 수 있습니다：addEventListener()또한, 다음과 같이 이벤트 리스너를 Window 객체에 추가할 수 있습니다：문서및창객체에 사용됩니다。
이 예제에서는 다음과 같이 사용됩니다：addEventListener()이 메서드는 클릭 이벤트를 문서에 추가합니다：
document.addEventListener("click", function() {
alert("Hello World!!!");
});테스트를 보세요‹/›이 예제에서는 다음과 같이 사용됩니다：addEventListener()이 메서드는 창 크기 조정(resize) 이벤트를 창에 추가합니다：
window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});테스트를 보세요‹/›현재, 이벤트 리스너는 JavaScript에서 이벤트를 처리하는 가장 일반적이고 선호되는 방법입니다.
또한 이를 사용할 수 있습니다.removeEventListener()요소에서 하나 이상의 이벤트를 제거하는 메서드입니다.
var box = document.getElementById("para");
// id="para"의 P 요소에 이벤트 리스너를 연결합니다.
box.addEventListener("mousemove", myFunc);
// id="para"의 P 요소에서 이벤트 리스너를 제거합니다.
box.removeEventListener("mousemove", myFunc);테스트를 보세요‹/›첫 번째 매개변수는 이벤트의 유형입니다(예: "click" 또는 "mousemove").
두 번째 매개변수는 이벤트가 발생할 때 호출할 함수입니다.
JavaScript 참조:HTML DOM 이벤트 객체 참조