Rumah > Artikel > hujung hadapan web > Ketahui strim acara JavaScript dan petua pengendali acara_javascript

Ketahui strim acara JavaScript dan petua pengendali acara_javascript

WBOYasal: 2016-05-16 15:18:221081semak imbas

Artikel ini memperkenalkan aliran acara JavaScript dan pengendali acara secara keseluruhan dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut

1. Aliran acara

Aliran acara menerangkan urutan acara yang diterima daripada halaman. Aliran peristiwa IE ialah aliran menggelegak peristiwa, manakala aliran peristiwa Netscape Communicator ialah aliran tangkapan peristiwa.

2. Acara menggelegak

Iaitu, peristiwa pada mulanya diterima oleh elemen yang paling khusus, dan kemudian merambat ke atas kepada nod yang kurang spesifik. Seperti:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div>Click</div>
</body>
</html>

Apabila elemen div dalam halaman diklik, acara klik akan disebarkan dalam susunan berikut:

elemen div
elemen badan
elemen html
objek dokumen

3. Tangkapan acara

Idea penangkapan acara ialah nod yang paling spesifik harus menerima acara terakhir. Tujuan tangkapan peristiwa adalah untuk menangkap peristiwa sebelum ia mencapai sasaran.

Apabila elemen div dalam halaman diklik, acara klik akan disebarkan dalam susunan berikut:

objek dokumen
tag html
tag badan
tag div

Walaupun spesifikasi memerlukan peristiwa harus disebarkan daripada objek dokumen, penyemak imbas biasanya mula menangkap peristiwa daripada objek tetingkap. Oleh kerana versi pelayar lama tidak menyokongnya, acara menggelegak biasanya digunakan.

4. Aliran acara DOM

Aliran acara yang ditentukan oleh "acara peringkat DOM2" termasuk tiga peringkat: peringkat tangkapan acara, peringkat sasaran dan peringkat menggelegak acara .

Dalam strim acara DOM, sasaran sebenar tidak menerima acara semasa fasa tangkapan. Maksudnya, semasa fasa tangkapan, acara berhenti selepas ia pergi dari dokumen ke html dan kemudian ke badan. Fasa seterusnya ialah fasa "pada sasaran", di mana peristiwa berlaku dalam div dan dianggap sebagai sebahagian daripada fasa menggelegak dalam pengendalian acara. Kemudian, fasa menggelegak berlaku. IE8 dan versi terdahulu tidak menyokong penstriman acara DOM Penyemak imbas mencetuskan peristiwa pada objek acara semasa fasa tangkapan Hasilnya ialah terdapat dua peluang untuk mengendalikan acara pada objek sasaran.

5. Pengendali acara

Acara ialah tindakan tertentu yang dilakukan oleh pengguna atau penyemak imbas itu sendiri; pengendali acara (atau pendengar acara) ialah fungsi yang bertindak balas kepada acara. Nama pengendali acara bermula dengan "on", seperti onload, onclick, dsb.

6. Pengendali acara HTML

Untuk melaksanakan beberapa kod js apabila butang diklik, anda boleh menulisnya seperti ini:

<div onclick="alert('Clicked')">Click</div>

Nota: Aksara sintaks HTML yang tidak dapat dielakkan tidak boleh digunakan di dalam.

Anda juga boleh memanggil skrip yang ditakrifkan di tempat lain dalam halaman:

<script>
 function showMessage () {
  document.write("fdas");
 }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

Kod dalam pengendali acara mempunyai akses kepada mana-mana kod dalam skop global apabila dilaksanakan.

Menggunakan ini akan mencipta fungsi yang merangkum nilai atribut elemen. Fungsi ini mempunyai acara pembolehubah setempat, iaitu objek acara:

<input type="button" value="Click Me" onclick="alert(event.type)" />

Di mana, nilai ini adalah sama dengan elemen sasaran acara, seperti:

<input type="button" value="Click Me" onclick="alert(this.value)" />

Terdapat banyak masalah dengan pengendali acara HTML, jadi pengendali acara yang ditentukan oleh js harus digunakan

7. Pengendali acara tahap 0 DOM

Untuk menggunakan js untuk menentukan pengendali acara, anda mesti mendapatkan rujukan kepada objek yang akan dikendalikan terlebih dahulu.

Setiap elemen mempunyai atribut pengendali acara sendiri, yang biasanya semuanya huruf kecil, seperti onclick. Seperti:

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log("hello");
}
</script>

Pengendali acara yang ditentukan menggunakan kaedah tahap DOM 0 dianggap kaedah elemen. Oleh itu, pengendali acara pada masa ini berjalan dalam skop elemen; iaitu, ini merujuk kepada elemen semasa:

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log(this.type);
}
</script>

Pengendali acara yang ditambahkan dengan cara ini akan diproses semasa fasa menggelegak aliran acara.

Alih keluar pengendali acara yang ditentukan melalui kaedah tahap 0 DOM:

btn.onclick = null;

8. Pengendali acara peringkat DOM2

addEventListener()

Kaedah ini menerima tiga parameter: nama acara yang akan diproses, fungsi pengendali peristiwa dan nilai Boolean adalah benar, ia bermakna memanggil pengendali peristiwa dalam peringkat tangkapan; memanggil acara dalam pengendali peringkat menggelegak. Seperti:

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
 console.log(this.id);
})

Anda juga boleh menambah berbilang pengendali acara pada butang, seperti:

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  console.log(this.id);
})
btn.addEventListener("click", function () {
  console.log(this.value);
})

alih keluarEventListener()

var btn = document.getElementById("btn");
function info () {
  console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
  console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
  console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
  console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

Dans la plupart des cas, des gestionnaires d'événements sont ajoutés à la phase de bouillonnement du flux d'événements pour maximiser la compatibilité avec différents navigateurs.

Ce qui précède concerne les flux d'événements JavaScript et les gestionnaires d'événements. J'espère que cela sera utile à l'apprentissage de chacun.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang penukaran bersama antara rentetan dan tatasusunan dalam kemahiran js_javascriptArtikel seterusnya：Penjelasan terperinci tentang penukaran bersama antara rentetan dan tatasusunan dalam kemahiran js_javascript

Artikel berkaitan

Lihat lagi