DOM EventListener


addEventListener() method

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>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Run instance»

Click "Run instance" Button View Online Example

The addEventListener() method is used to add an event handler to the specified element.

The event handle added by the addEventListener() method will not overwrite the existing event handle.

You can add multiple event handlers to an element.

You can add multiple event handlers of the same type to the same element, such as two "click" events.

You can add event listeners to any DOM object, not just HTML elements. Such as: window object.

The addEventListener() method makes it easier to control events (bubbling and capturing).

When you use the addEventListener() method, JavaScript is separated from the HTML markup, making it more readable. You can also add event listeners without controlling the HTML markup.

You can use the removeEventListener() method to remove event listening.

Syntax

element.addEventListener(event, function, useCapture);

The first parameter is the type of event (such as "click" or "mousedown").

The second parameter is the function called after the event is triggered.

The third parameter is a Boolean value used to describe whether the event is bubbling or capturing. This parameter is optional.

NoteNote: Do not use the "on" prefix. For example, use "click" instead of "onclick".

Add an event handler to the original element

Instance

<!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>

Run instance»

Click "Run instance" " button to view online examples

You can use the function name to reference external functions:

Example

<!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>

Run instance»

Click the "Run instance" button to view the online instance

Add multiple event handlers to the same element

addEventListener() Method allows adding multiple events to the same element without overwriting existing events:

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»

Click the "Run Instance" button to view the online instance

You can add different types of events to the same element:

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>

Run Instance»

Click the "Run Instance" button to view the online instance

Add an event handler to the Window object

addEventListener() method allows you to add event listeners to HTML DOM objects such as HTML elements, HTML documents, and window objects. Or other expenditure event objects such as: xmlHttpRequest object.

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance


Pass parameters

When passing parameter values, use "anonymous function" to call a function with parameters:

Example 

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Event bubbling or event capturing?

There are two ways of event delivery: bubbling and capturing.

Event delivery defines the order in which element events are fired. If you insert a <p> element into a <div> element and the user clicks on the <p> element, which element's "click" event will be triggered first?

In bubbling , the event of the internal element will be triggered first, and then the external element, that is: The click event of the <p> element is triggered first, and then the click event of the <div> element is triggered.

In capture , the event of the external element will be triggered first, and then the event of the internal element will be triggered, that is: the click event of the <div> element will be triggered first , and then trigger the click event of the <p> element.

The addEventListener() method can specify the "useCapture" parameter to set the delivery type:

addEventListener(event, function, useCapture);

The default value is false, that is, bubbling delivery. When the value is true, the event is delivered using capture.

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance

removeEventListener() method

removeEventListener() method removes the event handler added by the addEventListener() method:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Browser support

The number in the table indicates the version number of the first browser that supports this method.

##addEventListener()1.09.01.01.07.0removeEventListener()1.09.01.01.07.0
method1.png2.png3.png4.png5.png

Note: IE 8 and earlier IE versions, Opera 7.0 and earlier versions are not Support addEventListener() and removeEventListener() method. However, for such browser versions you can use the detachEvent() method to remove the event handle:

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

<!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>

Run instance»Click the "Run instance" button to view the online instance


HTML DOM Event Object Reference Manual

For all HTML DOM events, you can view our complete HTML DOM Event object Reference book.