JavaScript HTML DOM EventListener
kaedah addEventListener()
kaedah addEventListener() digunakan untuk 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.
Sintaks
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".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>Tambah berbilang pengendali acara pada elemen yang sama
kaedah addEventListener() membenarkan menambah berbilang acara pada elemen yang sama tanpa menulis ganti acara sedia ada:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 ("函數(shù)已執(zhí)行!")
}
</script>
</body>
</html> Tambah pengendali acara ke Tetingkap objek
Kaedah addEventListener() membenarkan anda menambah pendengar acara pada objek HTML DOM seperti elemen HTML, dokumen HTML dan objek tetingkap. Atau objek acara perbelanjaan lain seperti: objek xmlHttpRequest.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>嘗試重置瀏覽器的窗口觸發(fā) "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>Melalui parameter
Apabila menghantar nilai parameter, gunakan "fungsi tanpa nama" untuk memanggil fungsi dengan parameter:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊查看結(jié)果</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>Acara menggelegak atau menangkap peristiwa?
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 Jika palsu, ini bermakna penghantaran gelembung Apabila nilainya benar, acara akan dihantar menggunakan tangkapan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>kaedah removeEventListener()
kaedah removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動時會顯示隨機(jī)數(shù)。
<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>
