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>該實(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 ) 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>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</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>該實(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>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>該實(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>Anda boleh menambah jenis acara yang berbeza pada elemen yang sama:
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>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>實(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>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>實(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>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>實(shí)例演示了在添加不同事件監(jiān)聽時(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>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 事件句柄，鼠標(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>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>該實(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> 
