DOM 이벤트 리스너

addEventListener() 메소드

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 클릭 버튼 보기 온라인 인스턴스

addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.

addEventListener() 메서드로 추가된 이벤트 핸들은 기존 이벤트 핸들을 덮어쓰지 않습니다.

한 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.

두 개의 "클릭" 이벤트와 같이 동일한 유형의 여러 이벤트 핸들러를 동일한 요소에 추가할 수 있습니다.

HTML 요소뿐만 아니라 모든 DOM 객체에 이벤트 리스너를 추가할 수 있습니다. 예: 창 개체.

addEventListener() 메서드를 사용하면 이벤트(버블링 및 캡처)를 더 쉽게 제어할 수 있습니다.

addEventListener() 메서드를 사용하면 JavaScript가 HTML 마크업과 분리되어 HTML 마크업을 제어하지 않고도 이벤트 리스너를 추가할 수 있습니다.

removeEventListener() 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.

구문

요소.addEventListener(event, function, useCapture);

첫 번째 매개변수는 이벤트 유형(예: "click" 또는 "mousedown")입니다.

두 번째 매개변수는 이벤트가 발생한 후 호출되는 함수입니다.

세 번째 매개변수는 이벤트 버블링 또는 캡처 여부를 설명하는 데 사용되는 부울 값입니다. 이 매개변수는 선택사항입니다.

	注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

원래 요소에 이벤트 핸들러 추가

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

인스턴스 실행»

" 클릭 온라인 인스턴스를 보려면 인스턴스 실행" 버튼을 누르세요

함수 이름을 사용하여 외부 함수를 참조할 수 있습니다:

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

동일한 요소에 여러 이벤트 핸들러 추가

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<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>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

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

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</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>实例在window对象中使用 addEventListener() 方法。</p>
<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>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
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>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<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("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, 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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

브라우저 지원

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

方法
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

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

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

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
function myFunction() {
    alert("Hello World!");
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

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

모든 HTML DOM 이벤트에 대해 전체 내용을 볼 수 있습니다. HTML DOM 이벤트 객체 참조 매뉴얼.

DOM 이벤트 리스너

addEventListener() 메소드

인스턴스

구문

원래 요소에 이벤트 핸들러 추가

인스턴스

인스턴스

동일한 요소에 여러 이벤트 핸들러 추가

Instance

인스턴스

이벤트 핸들러 추가 Window 객체

인스턴스

매개변수 전달

예시

이벤트 버블링 또는 이벤트 캡처?

인스턴스

removeEventListener() 메서드

인스턴스

브라우저 지원

인스턴스

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

PHP 중국어 웹사이트