JavaScript HTML DOM 이벤트 리스너

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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> .item{ display: table; margin: 100px; } #outer{ width:400px; height:400px; background-color: blue; } #inner{ vertical-align: middle; width:200px; height:200px; background-color: white; } #core{ width:80px; height:80px; background-color: red; text-indent: 10px; line-height: 50px; } </style> </head> <body> <div class='item' id='outer' onclick="alert('outer')"> <div class='item' id='inner' onclick="alert('inner');stopbubble(arguments[0])"> <div class='item' id='core' onclick="alert('core')"> core!!!!! </div> </div> </div> <p>点击不同的颜色框</p> </body>  <script type=‘text/javascript‘> var core = document.getElementById(‘core‘); core.addEventListener("click",function(){alert(‘dddddd‘)},false); //addEventListener: can add one more event to node "core" function stopbubble(e){ e.stopPropagation();//stop bubble event on this node } </script> </html>

코드 재설정

자동운전

제출하다

시사 Clear