Ketahui strim acara JavaScript dan petua pengendali acara

Ketahui strim acara JavaScript dan petua pengendali acara_javascript

WBOY

Lepaskan： 2016-05-16 15:18:22

asal

1039 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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()" />

Salin selepas log masuk

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)" />

Salin selepas log masuk

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

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);
})

Salin selepas log masuk

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);
})

Salin selepas log masuk

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); //报错无效

Salin selepas log masuk

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.