Jika Anda menggunakan Write Less Do lebih banyak kerangka kerja seperti jQuery, Anda pasti akan lebih kecil kemungkinannya untuk menjadi ahli JS asli.
Xiaocai sebenarnya tidak ingin menulis blog ini, tampaknya sangat belum sempurna, tetapi melihat bahwa dia bahkan tidak dapat menjelaskan ikatan dan pembongkaran acara JS asli di internet, dia memutuskan untuk membuat sains populer.
Pertama -tama, Xiaocai tidak tahu banyak, hanya berbagi ide -ide saya dengan Anda.
Model acara DOM0
Model acara terus berkembang, dan model acara awal disebut level DOM0.
Model acara DOM0, didukung oleh semua browser.
Mendaftarkan nama acara secara langsung pada objek DOM adalah metode penulisan DOM0, seperti:
Salinan kode adalah sebagai berikut:
document.geteLementById ("test"). onClick = function (e) {};
Ini berarti mendaftarkan acara OnClick. Tentu saja, ia memiliki arti yang sama dengan tulisan ini:
Salinan kode adalah sebagai berikut:
document.geteLementById ("test") ["onMouseMove"] = function (e) {};
Ini bukan apa -apa, itu hanya dua cara untuk mengakses properti objek JS. Bentuk [] terutama untuk menyelesaikan masalah bahwa nama atribut bukan pengidentifikasi hukum. Misalnya, Object.123 harus melaporkan kesalahan, tetapi objek ["123"] menghindari masalah ini. Pada saat yang sama, penulisan [] juga menulis JS hidup -hidup, menggunakan string untuk mewakili nama atribut, yang secara dinamis dapat mengikat peristiwa saat runtime.
Kembali ke titik, ketika acara dipicu, parameter E akan dilewati secara default untuk mewakili objek acara. Melalui E, kita dapat memperoleh banyak informasi yang berguna, seperti koordinat klik, elemen DOM yang secara khusus memicu acara, dll.
Berdasarkan acara DOM0, untuk simpul DOM yang sama, hanya satu yang dapat didaftarkan, dan acara yang sama terdaftar kemudian akan mengganti yang terdaftar sebelumnya. Misalnya:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
btn.onmouseMove = function (e) {
peringatan ("ok");
};
btn ["onMouseMove"] = function (e) {
peringatan ("ok1");
};
Hasilnya akan mengeluarkan OK1.
Mari kita bicarakan ini selanjutnya. Ketika suatu peristiwa dipicu, ini mengacu pada objek DOM mana yang dipicu. Misalnya:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
btn.onmouseMove = function (e) {
waspada (this.id);
};
Tes hasil hasil. Karena acara tersebut terdaftar pada simpul DOM dengan tes ID, ketika acara dipicu, ini tentu saja mewakili simpul DOM ini. Dapat dipahami bahwa acara tersebut dipanggil oleh simpul Dom ini.
Oleh karena itu, cukup mudah untuk membatalkan acara. Anda hanya perlu mendaftarkan acara lagi dan mengatur nilainya ke NULL, misalnya:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
btn.onClick = function (e) {
peringatan ("ok");
};
btn.onClick = null;
Prinsipnya adalah bahwa peristiwa terdaftar terakhir harus menimpa yang sebelumnya. Atur acara terdaftar terakhir ke NULL, yang akan membuka tindu acara.
Masalahnya belum berakhir, dan model acara DOM0 juga melibatkan peristiwa yang ditulis langsung dalam HTML. Misalnya:
Salinan kode adalah sebagai berikut:
<div id = "test" onclick = "exec ();" > </div>
Acara yang terdaftar dengan cara ini juga mengikuti prinsip cakupan, dan hanya satu yang dapat terdaftar dan yang terakhir akan berlaku.
Perbedaannya adalah bahwa peristiwa yang terdaftar dengan cara ini setara dengan memanggil fungsi secara dinamis (agak eval berarti), sehingga objek acara tidak akan dilewati. Pada saat yang sama, ini menunjuk ke jendela, dan tidak lagi menjadi objek DOM yang memicu acara tersebut.
Model acara DOM2
Dibandingkan dengan DOM0, Shouca hanya memahami dua poin berikut:
・ DOM2 mendukung pendaftaran beberapa peristiwa yang sama dengan elemen DOM yang sama.
・ Dom2 telah menambahkan konsep penangkapan dan menggelegak.
Acara DOM2 dikelola oleh AddEventListener dan RemestEventListener, tentu saja, ini adalah standar.
Namun, IE8 dan browser berikut telah menciptakan lampiran yang sesuai dan detachevent. Karena Xiaocai sedikit tidak disengaja, artikel ini tidak akan membahasnya.
AddEventListener tentu saja merupakan acara pendaftaran. Ini memiliki tiga parameter, yaitu: "Nama Acara", "Callback Acara", dan "Capture/Bubble". Misalnya:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
btn.addeventListener ("klik", fungsi (e) {
peringatan ("ok");
}, PALSU);
Tak perlu dikatakan, nama acara tidak terlalu banyak. Dibandingkan dengan DOM0, ON sebelumnya baru saja dihapus.
Panggilan balik acara juga mudah dimengerti. Anda harus memberi tahu Anda jika acara tersebut dipicu! Saat menelepon kembali, seperti DOM0, parameter acara akan dilewati secara default. Pada saat yang sama, ini mengacu pada simpul DOM yang memicu acara tersebut.
Parameter terakhir adalah tipe Boolean, True mewakili acara penangkapan, dan False mewakili acara gelembung. Sebenarnya, mudah dimengerti. Pertama -tama mari kita buat diagram:
Ini berarti bahwa jika suatu elemen memicu suatu peristiwa, hal pertama yang diberitahukan adalah jendela, dan kemudian dokumen, dan berurutan sampai elemen (elemen target) yang benar -benar memicu acara tersebut. Proses ini ditangkap. Selanjutnya, acara akan menggelembung dari elemen target dan kemudian keluar secara berurutan hingga objek jendela. Proses ini adalah gelembung.
Mengapa mendesain dengan cara ini? Ini tampaknya karena asal -usul historisnya yang mendalam, jadi Xiaocai tidak tahu banyak tentang hal itu, jadi dia tidak akan berbicara omong kosong.
Dari sini kita dapat melihat bahwa acara penangkapan dipicu sebelum acara gelembung.
Misalkan ada struktur HTML seperti itu:
Salinan kode adalah sebagai berikut:
<Div id = "test">
<Div id = "testinner"> </div>
</div>
Kemudian kami mendaftarkan dua acara klik di div luar, yaitu acara penangkapan dan acara menggelegak, kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
// tangkap acara
btn.addeventListener ("klik", fungsi (e) {
peringatan ("ok1");
}, BENAR);
// acara menggelegak
btn.addeventListener ("klik", fungsi (e) {
peringatan ("ok");
}, PALSU);
Akhirnya, klik pada div bagian dalam, pertama -tama muncul OK1, lalu muncul OK. Dikombinasikan dengan diagram skematik di atas, div luar setara dengan tubuh pada gambar, dan div dalam setara dengan div bawah dalam gambar, membuktikan bahwa acara penangkapan dieksekusi terlebih dahulu, dan kemudian acara gelembung dieksekusi.
Mengapa menekankan mengklik div dalam? Karena elemen DOM yang benar -benar memicu acara tersebut harus dari lapisan dalam, dan elemen DOM lapisan luar memiliki kesempatan untuk mensimulasikan dan menangkap peristiwa dan acara gelembung, yang dapat dilihat dari diagram skematik.
Bagaimana jika Anda mendaftarkan acara Capture dan acara menggelegak pada elemen DOM yang benar -benar memicu acara tersebut?
Struktur HTML sama seperti di atas, dan kode JS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var btninner = document.getElementById ("testinner");
// acara menggelegak
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok");
}, PALSU);
// tangkap acara
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok1");
}, BENAR);
Tentu saja, klik div dalam, dan hasilnya adalah OK pertama kali muncul, lalu OK1. Secara teori, acara penangkapan harus dipicu terlebih dahulu, yaitu, OK1 muncul terlebih dahulu, tetapi di sini khusus, karena kami mendaftarkan suatu acara pada elemen DOM yang benar -benar memicu acara tersebut, yang setara dengan mendaftar di DIV pada gambar. Dari gambar tersebut, kita dapat melihat bahwa elemen DOM yang benar -benar memicu acara tersebut adalah titik akhir dari peristiwa penangkapan dan titik awal acara gelembung, sehingga tidak ada perbedaan antara peristiwa di sini. Yang mana yang terdaftar terlebih dahulu, mengeksekusi yang pertama. Dalam contoh ini, acara gelembung terdaftar terlebih dahulu, jadi dieksekusi terlebih dahulu.
Prinsip ini berlaku untuk beberapa acara dari jenis yang sama. Misalnya, jika 3 acara gelembung terdaftar sekaligus, perintah eksekusi akan dalam urutan pendaftaran, daftar pertama dan pertama -tama dijalankan. Misalnya:
Salinan kode adalah sebagai berikut:
var btninner = document.getElementById ("testinner");
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok");
}, PALSU);
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok1");
}, PALSU);
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok2");
}, PALSU);
Hasilnya tentu saja OK, OK1, dan OK2 pada gilirannya.
Untuk lebih memahami model acara, ada skenario lain. Jika div luar dan div bagian dalam mendaftarkan acara penangkapan pada saat yang sama, maka ketika mengklik div bagian dalam, acara div luar harus dipicu terlebih dahulu. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
var btninner = document.getElementById ("testinner");
btninner.addeventListener ("klik", fungsi (e) {
peringatan ("ok");
}, BENAR);
btn.addeventListener ("klik", fungsi (e) {
peringatan ("ok1");
}, BENAR);
Hasilnya adalah OK1 muncul terlebih dahulu.
Jika baik div luar dan div bagian dalam adalah peristiwa gelembung terdaftar, saat mengklik div dalam, acara div dalam harus dieksekusi terlebih dahulu, dan prinsipnya sama.
Pembaca yang cermat akan menemukan bahwa untuk kasus div bersarang, jika Anda mengklik div dalam, div luar juga akan memicu suatu peristiwa, yang tampaknya menjadi masalah!
Klik jelas div dalam, tetapi acara div luar juga dipicu, yang memang menjadi masalah.
Bahkan, ketika acara dipicu, objek acara akan dilewati secara default. Seperti yang disebutkan sebelumnya, ada metode pada objek acara ini: stoppropagation. Melalui metode ini, gelembung dapat dicegah, sehingga div luar tidak akan menerima acara tersebut. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
var btninner = document.getElementById ("testinner");
btn.addeventListener ("klik", fungsi (e) {
peringatan ("ok1");
}, PALSU);
btninner.addeventListener ("klik", fungsi (e) {
// Hentikan gelembung
e.Stoppropagation ();
peringatan ("ok");
}, PALSU);
Akhirnya, saya harus berbicara tentang cara menyelesaikan kejadian itu. Sintaks Unvent: Btn.RemoveEventListener ("Nama Acara", "Callback Acara", "Capture/Bubble");
Ini sama dengan parameter peristiwa pengikat, seperti yang dijelaskan secara rinci:
・ Nama acara berarti membatalkan acara.
・ Callback Acara adalah fungsi, yang harus sama dengan fungsi yang mendaftarkan acara.
・ Jenis acara, nilai boolean, ini harus konsisten dengan tipe ketika acara terdaftar.
Dengan kata lain, nama, panggilan balik, dan ketik, bersama -sama memutuskan acara mana yang akan dibatalkan, sangat diperlukan. Misalnya:
Salinan kode adalah sebagai berikut:
var btn = document.geteLementById ("test");
// menyimpan panggilan balik dalam variabel
var fn = fungsi (e) {
peringatan ("ok");
};
//Mengikat
btn.addeventListener ("klik", fn, false);
//Pemindahan
btn.removeeventlistener ("klik", fn, false);
Agar acara terdaftar dibatalkan, fungsi callback harus disimpan, jika tidak itu tidak dapat dibatalkan.
DOM0 dan DOM2 campuran
Segalanya sudah sangat berantakan, dan ini adalah penggunaan campuran, yang membuat orang hidup. . .
Jangan takut, tidak masalah untuk menggunakannya dengan cara yang beragam. Model DOM0 dan model DOM2 masing -masing mengikuti aturan mereka sendiri dan tidak saling mempengaruhi.
Secara keseluruhan, tidak ada yang lain jika terdaftar terlebih dahulu dan dieksekusi terlebih dahulu.
nota bene
Pada titik ini, acara JS asli hampir selesai. Xiaocai hanya mengetahui hal ini. Pembaca dipersilakan untuk menambahkan poin pengetahuan lainnya.
Dalam aplikasi yang sebenarnya, para ahli sungguhan tidak akan dengan bodoh mendaftarkan begitu banyak acara. Secara umum, Anda hanya perlu mendaftarkan suatu acara di elemen DOM terluar, dan kemudian menggunakan mekanisme penangkapan dan gelembung untuk menemukan elemen DOM yang benar -benar memicu acara tersebut, dan akhirnya memanggil panggilan balik berdasarkan informasi yang disediakan oleh elemen DOM yang memicu acara tersebut.
Dengan kata lain, para ahli akan mengelola acara sendiri tanpa mengandalkan browser untuk mengelolanya, yang dapat meningkatkan efisiensi dan memastikan kompatibilitas. Bukankah ini yang dilakukan JQuery?
Oke, tutorial berakhir di sini, saya harap ini akan membantu pembaca!