JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
addEventListener() kaedah
Acara mendengar dicetuskan apabila pengguna mengklik butang:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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 ) kaedah digunakan Menambah pengendali acara pada elemen yang ditentukan.
Pengendali acara yang ditambahkan oleh kaedah addEventListener() tidak akan menimpa pemegang acara yang sedia ada.
Anda boleh menambah berbilang pengendali acara pada elemen.
Anda boleh menambah berbilang pengendali acara daripada jenis yang sama pada elemen yang sama, seperti dua acara "klik".
Anda boleh menambah pendengar acara pada mana-mana objek DOM, bukan sekadar elemen HTML. Seperti: objek tingkap. Kaedah
addEventListener() menjadikannya lebih mudah untuk mengawal acara (bergelembung dan menangkap).
Apabila anda menggunakan kaedah addEventListener(), JavaScript dipisahkan daripada penanda HTML, menjadikannya lebih mudah dibaca Anda juga boleh menambah pendengar acara tanpa mengawal penanda HTML.
Anda boleh menggunakan kaedah removeEventListener() untuk mengalih keluar pendengar acara.
Syntax
element.addEventListener(event, function, useCapture);
Parameter pertama ialah jenis acara (seperti "klik" atau "mousedown").
Parameter kedua ialah fungsi yang dipanggil selepas peristiwa dicetuskan.
Parameter ketiga ialah nilai Boolean yang digunakan untuk menerangkan sama ada acara dibuih atau ditangkap. Parameter ini adalah pilihan.
Nota: Jangan gunakan awalan "on". Contohnya, gunakan "klik" dan bukannya "onclick".
Tambahkan pengendali acara pada elemen asal
Apabila pengguna mengklik pada elemen, "Hello World muncul:
<!DOCTYPE html>
<html>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>Anda boleh menggunakan nama fungsi untuk rujuk fungsi luaran:
"Hello World" muncul apabila pengguna mengklik pada elemen:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>Tambahkan berbilang pengendali acara pada elemen yang sama
AddEventListener () kaedah membenarkan menambah berbilang pengendali acara pada acara elemen yang sama dan tidak akan menimpa acara sedia ada:
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>Anda boleh menambah jenis acara yang berbeza pada elemen yang sama:
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>Tambah pengendali acara pada objek Window
Kaedah addEventListener() membolehkan anda menambah pendengar acara pada objek HTML DOM seperti elemen HTML, dokumen HTML dan objek tetingkap. Atau objek acara perbelanjaan lain seperti: objek xmlHttpRequest.
Tambah pendengar acara apabila pengguna menetapkan semula saiz tetingkap:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>Pas parameter
Apabila menghantar nilai parameter, gunakan "fungsi tanpa nama" untuk memanggil fungsi dengan parameter :
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>Acara menggelegak atau menangkap acara?
Terdapat dua cara penyampaian acara: menggelegak dan menangkap.
Penghantaran acara mentakrifkan susunan acara elemen dicetuskan. Jika anda memasukkan elemen <p> ke dalam elemen <div> dan pengguna mengklik pada elemen <p>
Dalam menggelegak, peristiwa elemen dalaman akan dicetuskan dahulu, dan kemudian elemen luaran, iaitu: peristiwa klik elemen <p> akan dicetuskan dahulu, dan kemudian peristiwa klik elemen <div>
Dalam tangkapan, peristiwa elemen luaran akan dicetuskan terlebih dahulu, dan kemudian peristiwa elemen dalaman akan dicetuskan, iaitu: peristiwa klik elemen <div> dan kemudian peristiwa elemen <p>
kaedah addEventListener() boleh menentukan parameter "useCapture" untuk menetapkan jenis penghantaran:
addEventListener(event, function, useCapture);
Nilai lalai adalah palsu, Dan penghantaran gelembung, apabila nilainya benar, acara menggunakan penghantaran tangkapan.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<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("你点击了 P 元素!"); }, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV 元素 !"); }, true);
</script>
</body>
</html>kaedah removeEventListener()
kaedah removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():
<!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 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<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>Pelayar menyokong borang
in mewakili nombor versi penyemak imbas pertama yang menyokong kaedah ini.
Kaedah
addEventListener() 1.0 9.0 1.0 1.0 7.0
<(Even t.remove) 9.0 1.0 1.0 7.0 Nota: IE 8 dan versi IE yang lebih awal, Opera 7.0 dan versi terdahulu tidak menyokong kaedah addEventListener() dan removeEventListener(). Walau bagaimanapun, untuk versi penyemak imbas sedemikian, anda boleh menggunakan kaedah detachEvent() untuk mengalih keluar pemegang acara: element.attachEvent(event, function element.detachEvent(event, function);Penyelesaian silang penyemak imbas:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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> 
