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中文网(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中文网(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 ("函数已执行!")
}
</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中文网(php.cn)</title>
</head>
<body>
<p>尝试重置浏览器的窗口触发 "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中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看结果</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中文网(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中文网(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>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
