Penjelasan terperinci tentang aliran acara dan penangan acara di JavaScript

Aliran Acara: Ada dua jenis. Yaitu adalah aliran gelembung acara. Ketika acara dimulai, itu diterima dari elemen yang paling spesifik dan menyebarkan ke atas langkah demi langkah ke node yang kurang spesifik (elemen -> dokumen). Sebaliknya, aliran penangkapan acara Netscape.

Acara level DOM2 menetapkan bahwa aliran acara mencakup tiga tahap: tahap penangkapan acara, tahap target dan tahap gelembung acara.

Sebagian besar waktu itu adalah fase gelembung untuk menambahkan event handler ke aliran acara. Kelesahan Eventutil:

 var eventUtil = {addhandler: function (element, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ('on' + type, handler); // ie8} else {element ['on' + type] = handler; }}, RemestHandler: function () {...}}

Mari kita lihat secara detail di bawah ini:

Penangan acara level dom0

Cara tradisional untuk menentukan penangan acara melalui JavaScript adalah dengan menetapkan fungsi ke atribut event handler.

Setiap elemen memiliki atribut event handler sendiri, yang biasanya semuanya huruf kecil, seperti OnClick. Mengatur nilai properti ini ke suatu fungsi dapat menentukan event handler.

 var btn = document.getElementById ('mybtn'); // Tambahkan event handler btn.onClick = function () {waspada (this); // adalah elemen dom btn}; // hapus event handler btn.onClick = null;

Keuntungan: 1. Sederhana 2. Ini memiliki keuntungan dari cross-browser

Kerugian: Penangan acara tidak ditentukan sebelum kode dijalankan, sehingga kode -kode ini terletak di belakang tombol di halaman, jadi ada kemungkinan bahwa tidak ada respons yang diterima setelah periode waktu tertentu, dan pengalaman pengguna menjadi lebih buruk.

Penangan acara level dom2

Dua metode didefinisikan untuk menangani operasi yang menentukan dan menghapus penangan acara: AddEventListener () dan RemestEventListener (). Tiga parameter, 1. Nama acara yang akan diproses. 2. Fungsi sebagai Event Handler 3. Nilai Boolean. Nilai boolean terakhir adalah benar, yang berarti bahwa event handler dipanggil pada tahap penangkapan, dan palsu berarti bahwa event handler dipanggil dalam tahap gelembung.

 // Tambahkan beberapa penangan acara var btn = document.geteLementById ('mybtn'); btn.addeventListener ('klik', function () {alert (this); // adalah elemen dom btn}, false); btn.addeventener ('click', function () {'hello world'); btn.removeEventListener ('klik', function () {// fungsi anonim tidak dapat dihapus, penghapusan gagal}, false); // tulis ulang var handler = function () {waspada (this.id); }; btn.addeventListener ('klik', penangan, false); // Hapus event handler lagi btn.removeeventlistener ('klik', pawang, false); // hapus dengan sukses

Dua penangan acara ini dipecat dalam urutan di mana mereka ditambahkan. Dalam kebanyakan kasus, penangan acara ditambahkan ke tahap gelembung dari aliran acara, yang dapat menjadi kompatibilitas maksimum dengan berbagai versi browser.

Keuntungan: Satu elemen dapat menambahkan beberapa penangan acara

Kerugian: IE8 dan di bawah browser tidak mendukung penangan acara tingkat DOM2. (Termasuk IE8)

Yaitu penangan acara

Dua metode didefinisikan, mirip dengan yang di atas: attachEvent (), detachevent (). Dua metode ini menerima dua parameter yang sama: nama penangan acara dan fungsi event handler. Karena IE8 dan versi sebelumnya hanya mendukung gelembung acara, penangan acara ditambahkan melalui detachevent () akan ditambahkan ke fase gelembung.

 var btn = document.geteLementById ('mybtn'); btn.attachevent ('ontClick', function () {waspada (this); // window}); btn.attachevent ('ontClick', funciton () {hello, world ");});

Klik tombol, urutan pemicu dari dua penangan acara ini adalah kebalikan dari yang di atas. Tidak dipicu dalam urutan di mana penangan acara ditambahkan, justru sebaliknya.

Keuntungan: Satu elemen dapat menambahkan beberapa penangan acara

Kekurangan: Hanya dukungan yaitu.

Cross Browser Event Handler

misalnya:

 var eventUtil = {addhandler: function (ele, type, handler) {if (eLe.addeventListener) {ele.addeventListener (type, handler, false); } else if (eLe.AttachEvent) {eLe.AttachEvent ('on' + type, handler); } else {eLe ['on' + type] = handler}}, removeHandler: function (eLe, type, handler) {if (ele.removeeventlistener) {ele.removeeventlistener (type, handler, false); } lain jika (ele.detachevent) {ele.detachevent ('on' + type, handler); } else {ele ['on' + type] = null; }}}