JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
addEventListener() method
The listening event is triggered when the user clicks the button:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>addEventListener() method is used Adds 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.
Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".
Add an event handler to the original element
When the user clicks on the element, "Hello World!" pops up:
<!DOCTYPE html>
<html>
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>You can use the function name to refer to the external function:
"Hello World!" pops up when the user clicks on the element:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實(shí)例使用 addEventListener() 方法在用戶點(diǎn)擊按鈕時(shí)執(zhí)行函數(shù)。</p>
<button id="myBtn">點(diǎn)我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>Add multiple event handlers to the same element
The addEventListener() method allows adding multiple event handlers to the same element event, and will not overwrite existing events:
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實(shí)例使用 addEventListener() 方法向同個(gè)按鈕中添加兩個(gè)點(diǎn)擊事件。</p>
<button id="myBtn">點(diǎn)我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函數(shù)已執(zhí)行!") }
</script>
</body>
</html>You can add different types of events to the same element:
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實(shí)例使用 addEventListener() 方法在同一個(gè)按鈕中添加多個(gè)事件。</p>
<button id="myBtn">點(diǎn)我</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>Add event handlers to Window objects
The 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.
Add event listening when the user resets the window size:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實(shí)例在window對(duì)象中使用 addEventListener() 方法。</p>
<p>嘗試重置瀏覽器的窗口觸發(fā) "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>Pass parameters
When passing parameter values, use "anonymous function" to call a function with parameters:
Example
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實(shí)例演示了在使用 addEventListener() 方法時(shí)如何傳遞參數(shù)。</p>
<p>點(diǎn)擊按鈕執(zhí)行計(jì)算。</p>
<button id="myBtn">點(diǎn)我</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>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 will be triggered first, and then the click event of the <div> element will be 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 the event of the <p> element will be triggered. Click event.
The addEventListener() method can specify the "useCapture" parameter to set the delivery type:
addEventListener(event, function, useCapture);
The default value is false, And bubble delivery, when the value is true, the event uses capture delivery.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px; }
</style>
</head>
<body>
<p>實(shí)例演示了在添加不同事件監(jiān)聽(tīng)時(shí)，冒泡與捕獲的不同。</p>
<div id="myDiv">
<p id="myP">點(diǎn)擊段落，我是冒泡。</p>
</div><br> <div id="myDiv2">
<p id="myP2">點(diǎn)擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你點(diǎn)擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你點(diǎn)擊了 DIV 元素 !"); },
false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你點(diǎn)擊了 P 元素!"); }, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你點(diǎn)擊了 DIV 元素 !"); }, true);
</script>
</body>
</html>removeEventListener() method
removeEventListener() method removes the event handler added by the addEventListener() method:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white; }
</style>
</head>
<body>
<div id="myDIV">
div 元素添加了 onmousemove 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動(dòng)時(shí)會(huì)顯示隨機(jī)數(shù)。
<p>點(diǎn)擊按鈕移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">點(diǎn)我</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>Browser support
Form The number in represents the version number of the first browser that supports this method.
Method
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0
Note: IE 8 and earlier IE versions, Opera 7.0 and earlier versions do not support the addEventListener() and removeEventListener() methods. However, for this type of browser version you can use the detachEvent() method to remove the event handle:
element.attachEvent(event, function); element.detachEvent(event, function);
Cross-browser solution:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>該實(shí)例演示了所有瀏覽器兼容的解決方法。</p>
<button id="myBtn">點(diǎn)我</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>
