DOM EventListener


kaedah addEventListener()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

Run Instance»

Klik "Run Instance" Button View Online Instance

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 peristiwa (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

elemen.addEventListener(acara, fungsi, useCapture);

Parameter pertama ialah jenis acara (seperti "klik" atau "turun tetikus"

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.

Note注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

Tambahkan pengendali acara pada elemen asal

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

Run Instance»

Klik " Butang Jalankan Instance" " untuk melihat kejadian dalam talian

Anda boleh menggunakan nama fungsi untuk merujuk fungsi luaran:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat tika dalam talian

Tambahkan berbilang pengendali acara pada elemen yang sama

<🎜 Kaedah >addEventListener() membenarkan menambah berbilang acara pada elemen yang sama tanpa menulis ganti peristiwa sedia ada:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

Run Instance» Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Anda boleh menambah pelbagai jenis acara pada elemen yang sama:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

Tambahkan pengendali acara ke objek Window

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.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian


Melepasi parameter

Apabila menghantar nilai parameter, gunakan "fungsi tanpa nama" untuk memanggil fungsi dengan parameter:

Contoh 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

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 unsur dalam akan dicetuskan dahulu, dan kemudian unsur luar, iaitu: Peristiwa klik bagi elemen <p> dicetuskan dahulu, dan kemudian peristiwa klik bagi elemen <div>

Dalam tangkapan , peristiwa elemen luaran akan dicetuskan terlebih dahulu, dan kemudian peristiwa elemen dalaman akan dicetuskan, iaitu: peristiwa klik pada <div> elemen akan dicetuskan terlebih dahulu , dan kemudian mencetuskan peristiwa klik bagi elemen <p> Kaedah

addEventListener() boleh menentukan parameter "useCapture" untuk menetapkan jenis penghantaran:

addEventListener(event, fungsi , useCapture);

Nilai lalai adalah palsu, iaitu penghantaran menggelegak Apabila nilainya benar, acara dihantar menggunakan tangkapan.

Instance

<!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>

<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("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

kaedah removeEventListener()

kaedah removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():

Instance

<!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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Sokongan Penyemak Imbas

Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong kaedah ini.

方法1.png2.png3.png4.png5.png
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

Nota: IE 8 dan versi IE yang lebih awal, Opera 7.0 dan versi terdahulu tidak menyokong addEventListener() dan removeEventListener() kaedah. 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);

Instance

rreee

Run instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Manual Rujukan Objek Acara HTML DOM

Untuk semua acara HTML DOM, anda boleh melihat lengkap kami Manual Rujukan objek Acara HTML DOM.

←
→