addEventListener() 메소드
addEventListener() 메소드는 지정된 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.
addEventListener() 메서드로 추가된 이벤트 핸들은 기존 이벤트 핸들을 덮어쓰지 않습니다.
한 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.
두 개의 "클릭" 이벤트와 같이 동일한 유형의 여러 이벤트 핸들러를 동일한 요소에 추가할 수 있습니다.
HTML 요소뿐만 아니라 모든 DOM 객체에 이벤트 리스너를 추가할 수 있습니다. 예: 창 개체.
addEventListener() 메서드를 사용하면 이벤트(버블링 및 캡처)를 더 쉽게 제어할 수 있습니다.
addEventListener() 메서드를 사용하면 JavaScript가 HTML 마크업과 분리되어 가독성이 높아집니다. HTML 마크업을 제어하지 않고도 이벤트 리스너를 추가할 수도 있습니다.
removeEventListener() 메서드를 사용하여 이벤트 수신을 제거할 수 있습니다.
Syntax
element.addEventListener(event, function, useCapture);
첫 번째 매개변수는 이벤트 유형(예: "click" 또는 "mousedown")입니다.
두 번째 매개변수는 이벤트 후에 호출됩니다. 기능이 트리거됩니다.
세 번째 매개변수는 이벤트가 버블링되는지 아니면 캡처되는지를 설명하는 데 사용되는 부울 값입니다. 이 매개변수는 선택사항입니다.
참고: "on" 접두사를 사용하지 마세요. 예를 들어 "onclick" 대신 "click"을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>동일한 요소에 여러 이벤트 핸들러 추가
addEventListener() 메서드를 사용하면 기존 이벤트를 덮어쓰지 않고 동일한 요소에 여러 이벤트를 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函数已执行!")
}
</script>
</body>
</html>Window 객체에 이벤트 핸들러 추가
addEventListener () 메서드를 사용하면 다음을 수행할 수 있습니다. HTML 요소, HTML 문서 및 창 객체와 같은 HTML DOM 객체에 이벤트 리스너를 추가합니다. 또는 xmlHttpRequest 객체와 같은 기타 지출 이벤트 객체.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html> 매개변수 전달
매개변수 값을 전달할 때 "익명 함수"를 사용하여 매개변수가 있는 함수를 호출합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看结果</button>
<p id="demo"></p>
<script>
var p1 = 8;
var p2 = 8;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>이벤트 버블링 또는 이벤트 캡처?
이벤트 전달 방법에는 버블링과 캡처 두 가지가 있습니다.
이벤트 전달은 요소 이벤트가 실행되는 순서를 정의합니다. <p> 요소를 <div> 요소에 삽입하고 사용자가 <p> 요소를 클릭하면 어떤 요소의 '클릭' 이벤트가 먼저 실행되나요?
버블링에서는 내부 요소의 이벤트가 먼저 트리거된 다음 외부 요소가 트리거됩니다. 즉, <p> 요소의 클릭 이벤트가 먼저 트리거된 다음 <div> ; 요소가 트리거됩니다.
캡처 시 외부 요소의 이벤트가 먼저 트리거된 다음 내부 요소의 이벤트가 트리거됩니다. 즉, <div> 요소의 클릭 이벤트가 먼저 트리거된 다음 클릭 이벤트가 발생합니다. <p> 요소가 트리거됩니다.
addEventListener() 메소드는 "useCapture" 매개변수를 지정하여 전달 유형을 설정할 수 있습니다.
addEventListener(event, function, useCapture);
기본값은 false, 즉 버블 전달인 경우입니다. true인 경우 해당 이벤트는 캡처 패스를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">
<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你点击了 P1 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV1 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV2 元素 !");
}, true);
</script>
</body>
</html>removeEventListener() 메서드
removeEventListener() 메서드는 addEventListener() 메서드에 의해 추가된 이벤트 핸들러를 제거합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
}
</style>
</head>
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点击暂停</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>
다음 섹션