Acara adalah metode implementasi pemrograman asinkron, pada dasarnya komunikasi antara berbagai komponen program, dan DOM mendukung sejumlah besar acara;
Artikel ini menggunakan poin -poin ini untuk menganalisis prinsip -prinsip dasar pemrosesan acara secara rinci: jenis acara, target acara, penangan acara, objek acara, perambatan acara
Akhirnya, saya akan memperkenalkan objek acara kepada Anda;
1. Tipe Acara: adalah string huruf kecil yang digunakan untuk menunjukkan jenis peristiwa apa yang terjadi, seperti 'mouseover'
Jenis acara tradisional: acara bentuk, acara jendela, acara mouse, acara keyboard, acara DOM, acara HTML5, layar sentuh dan acara perangkat seluler, dll.
2. Target acara: objek yang memicu acara tersebut
3. Event Listener: Fungsi yang menangani atau menanggapi acara. Ketika suatu objek memicu suatu peristiwa, browser akan secara otomatis memanggil fungsi yang terdaftar pada objek;
Register Event Handler (dengarkan acara):
1. Daftar sebagai atribut HTML (itu hanya akan dipicu dalam fase menggelegak) seperti <tabel id = "t" onClick = "ModifyText ();">; dan beberapa jenis acara biasanya dipicu langsung di browser daripada pada elemen dokumen tertentu. Penangan acara ini ditempatkan pada tag <body>, tetapi browser akan mendaftarkannya di objek jendela, seperti <body onload = "waspada ('halo dunia!')">, Dan acara ini termasuk:
OnAfterprint onfocus ononline onResize onbeforeprint onhashchange
OnPagehide OnStorage onBeforeunload onload onundo onundo
Onblur OnMessage Onpopstate Onunload OneError Onoffline Onredo
Nilai acara sebagai atribut HTML adalah string kode JS, yang merupakan badan fungsi pemrosesan dan tidak mengandung {}. Catatan: Cobalah untuk tidak mendaftarkan acara pada tag HTML lainnya, itu melanggar prinsip pemisahan kode HTML dan JavaScript. Jika fungsi acara dapat mengklik elemen objek acara sebelum dimuat, ini akan menyebabkan kesalahan;
2. Daftarkan sebagai atribut elemen DOM (hanya akan dipicu dalam tahap gelembung). Pada saat ini, nama atribut event handler perlu diawali dengan 'on'. Metode ini kompatibel dengan semua browser. Satu -satunya kerugian adalah bahwa ia hanya dapat mendaftarkan satu fungsi penangan acara. Jika atribut OnClick didefinisikan dua kali, definisi terakhir akan menimpa yang sebelumnya; misalnya: window.onload = function () {...};
3. Di semua browser kecuali IE8 dan versi sebelumnya, operasi acara (mendengarkan dan memicu) DOM didefinisikan dalam antarmuka EventTarget. Antarmuka ini digunakan untuk simpul elemen, node dokumen dan objek jendela. Selain itu, objek bawaan browser seperti XmlHttPRequest, Audionode, AudioContext, dll. Juga menggunakan antarmuka ini. Ada tiga metode antarmuka ini, AddEventListener dan RemestEventListener digunakan untuk mengikat dan menghapus fungsi pendengar, dan SPATCATCHEVENT digunakan untuk memicu peristiwa;
Metode AddEventListener (Type, Listener, Boolean) digunakan untuk mendaftarkan pendengar. Parameter ketiga menetapkan metode perambatan acara. Biasanya, nilai default false digunakan, yang berarti bahwa fungsi mendengarkan hanya dipicu pada tahap gelembung (Pupple). Ketika diatur ke true, itu berarti bahwa fungsi mendengarkan dipicu pada tahap penangkapan (penangkapan); Setiap banyak pendengar dapat didaftarkan untuk acara tipe yang sama pada objek yang sama, dan semua pendengar akan dipicu dalam urutan pendaftaran (mendaftarkan pendengar duplikat akan diabaikan oleh browser);
Jika Anda ingin meneruskan parameter ke fungsi mendengarkan, Anda dapat membungkus fungsi mendengarkan dengan fungsi anonim, seperti elm.addeventListener ('klik', fungsi () {dengarkan ('argumen nyata')}, false);
Ketika pendengar yang terdaftar adalah variabel referensi ke fungsi, Anda dapat menggunakan RemestEventLestener (ketik, pendengar, boolean) untuk menghapus pendengar pada target acara. Peristiwa gelembung dan acara menangkap dari acara mendengarkan yang sama perlu dihapus secara terpisah, dan keduanya tidak saling mengganggu;
var div = document.geteLementById ('div'); var listener = function (event) { / * Lakukan sesuatu di sini * /}; div.addeventListener ('klik', pendengar, false); div.removeeventlistener ('klik', pendengar, false);Metode DispatchEvent (Event) secara manual memicu peristiwa yang ditentukan pada node saat ini, sehingga memicu pelaksanaan fungsi mendengarkan. Metode ini mengembalikan nilai boolean. Selama fungsi mendengarkan memanggil Event.PreventDefault (), ia mengembalikan False. Kalau tidak, itu benar. Parameter adalah instance dari objek acara. Parameter tidak dapat kosong dan harus menjadi objek acara yang valid, jika tidak kesalahan akan dilaporkan.
btn.addeventListener ('klik', pendengar, false);
var e = acara baru ('klik');
btn.dispatchevent (e); // Acara klik segera dipicu pada BTN, dan pendengar akan segera dipanggil
Contoh berikut menentukan apakah acara tersebut telah dibatalkan berdasarkan nilai pengembalian metode DispatchEvent.
var dibatalkan =! btn.dispatchevent (event);
if (dibatalkan) {console.log ('event cancel'); }
else {console.log ('event not contanceed'); }}
4. IE8 dan versi sebelumnya hanya mendukung lampiran (tipe, pendengar) dan detachevent (tipe, pendengar). Penggunaan dan AddeventListener mereka berbeda: a. Hanya ada dua parameter; B. Jenis parameter harus diawali dengan 'on'; C. Ini memungkinkan pendaftaran berulang dari acara mendengarkan yang sama dan akan dipanggil; D. Ada kerugian untuk menggunakan metode attachEvent, yaitu nilai ini akan menjadi objek jendela alih -alih elemen yang memicu acara;
Masalah Pesanan Panggilan: 1). Penangan yang terdaftar dengan mengatur properti objek atau atribut HTML selalu disebut terlebih dahulu;
2). Penangan yang terdaftar di AddEventListener dipanggil dalam urutan pendaftaran mereka;
3). Penangan yang terdaftar dengan Lampiran ExtaVent di Legacy IE dapat dipanggil dalam urutan apa pun.
Masalah Nilai Pengembalian:
1). Nilai pengembalian event handler hanya bermakna bagi penangan yang terdaftar melalui atribut. Mendaftarkan nilai pengembalian event handler dengan mengatur atribut objek atau atribut html ke false adalah untuk memberi tahu browser untuk tidak melakukan operasi default yang terkait dengan acara ini. Ketika browser ingin melompat ke halaman baru, acara OnBeforeunload dari objek jendela dipicu. Jika nilai pengembaliannya adalah string, itu akan muncul di kotak dialog Konfirmasi Kueri;
2) .addeventListener () atau lampiran () Daftarkan pawang acara. Untuk membatalkan operasi default browser, Anda harus menghubungi metode preventdefault () atau mengatur properti ReturnValue dari objek acara.
Ini menunjuk pada masalah:
1). Fungsi mendengarkan yang ditentukan oleh metode AddEventListener, objek internal ini selalu menunjuk ke simpul yang memicu acara;
2). Ini dari fungsi penangan acara yang terdaftar oleh IE8 dan metode lampiran sebelumnya menunjuk ke objek global;
Semua objek ini ditulis dengan cara berikut menunjuk ke simpul elemen.
element.onClick = print;
element.addeventlistener ('klik', cetak, false)
element.onClick = function () {console.log (this.id);}
<elemen onclick = "console.log (this.id)">
Objek ini dengan cara berikut menunjuk ke objek global.
element.onClick = function () {dosomething ()};
element.setAttribute ('onClick', 'dosomething ()');
<Element onClick = "dosomething ()">
element.attachevent ('onClick', dosomething) // ie8
Masalah memori: Untuk kode berikut, fungsi anonim baru akan dibuat di setiap loop, dan memori akan dikonsumsi lebih banyak dan lebih banyak; Karena tidak disimpan untuk referensi ke fungsi anonim, itu tidak dapat disebut RemestEventListener; Oleh karena itu, pendengar parameter kedua harus disimpan sebagai referensi untuk fungsi acara pemrosesan;
untuk (i = 0; i <els.length; i ++) {els [i] .addeventListener ("klik", function (e) {/*lakukan sesuatu*/}, false}); }Fungsi alat tujuan umum yang kompatibel dengan lebih lama yaitu:
Pastikan bahwa fungsi alat ini menambah event handler menunjuk ke objek target acara
fungsi addEvent (target, type, func) {if (target.addeventListener) {target.addeventListener (type, func, false); } else {target.attachevent ('on'+type, function (e) {// Fungsi pemrosesan yang didaftarkan oleh attachEvent di sini tidak terikat pada referensi, sehingga tidak mungkin untuk menggunakan detachevent untuk menghapus return func.call (target, e);}); }}General Event Handler (karena IE8 dan versi sebelumnya, pawang di properti sebagai target acara membutuhkan jendela. Untuk mendapatkan objek acara, dan objek node target yang memicu acara tersebut diperoleh melalui acara tersebut.
fungsi fungsi (acara) {var event = event || window.event; var target = event.target || event.srcelement; //...... Kode Penanganan}4. Perpanjangan acara: Ini adalah proses yang dengannya browser memutuskan objek mana yang memicu event handlernya.
Aliran acara yang ditentukan dalam "Event Level DOM2" mencakup tiga tahap: Tahap Pengambilan Acara ==> Dalam tahap target ==> tahap gelembung acara. Hal pertama yang terjadi adalah fase penangkapan peristiwa (merambat dari lapisan luar ke lapisan dalam), yang memberikan kesempatan untuk semua node yang dilewati acara untuk mencegat peristiwa. Lalu ada acara penerimaan target yang sebenarnya (dieksekusi dalam urutan pendaftaran). Tahap terakhir adalah tahap menggelegak (menggelegak dari lapisan dalam ke lapisan luar).
Ketika elemen kontainer dan elemen bersarang, yaitu, ketika penangan acara dipanggil pada tahap penangkapan dan di tahap gelembung: acara tersebut mengeksekusi penangan acara dalam urutan aliran acara DOM, dan ketika acara tersebut berada dalam tahap target, urutan panggilan acara ditentukan oleh urutan penulisan acara binding event tersebut
Jika Anda ingin acara tersebut mencapai simpul tertentu dan tidak lagi menyebar, ada dua cara:
1. Gunakan metode event.stoppropagation () dari objek peristiwa untuk mencegah propagasi fungsi mendengarkan saat ini;
2. Gunakan metode acara.
Delegasi peristiwa: Karena peristiwa akan merambat ke atas ke simpul induk di tahap gelembung, fungsi mendengarkan node anak dapat didefinisikan pada node induk, dan fungsi mendengarkan dari simpul induk dapat menangani peristiwa beberapa elemen anak secara seragam;
5. Objek Acara (Acara): Setelah peristiwa terjadi, objek peristiwa akan dihasilkan dan diteruskan sebagai parameter ke fungsi mendengarkan. Browser secara asli menyediakan objek acara, dan semua acara adalah contoh objek ini, atau mewarisi objek Event.Prototype. Objek acara itu sendiri adalah konstruktor yang dapat digunakan untuk menghasilkan contoh baru.
var ev = event baru ("lihat", {"Bubbles": true, "cancelable": false});
Document.DispatchEvent (EV);
Konstruktor acara menerima dua parameter. Parameter pertama adalah string, yang menunjukkan nama acara; Parameter kedua adalah objek, yang menunjukkan konfigurasi objek peristiwa. Parameter ini dapat memiliki dua properti berikut.
Gelembung: Nilai boolean, opsional, default salah, menunjukkan apakah objek peristiwa menggelegak.
Batal yang dapat dibatalkan: Nilai boolean, opsional, default salah, menunjukkan apakah acara tersebut dapat dibatalkan.
Properti Objek Acara:
1. Terkait dengan tahap acara:
Bubbles: Properti Baca-Hanya, Mengembalikan Nilai Boolean, menunjukkan apakah peristiwa saat ini akan menggelembung. Fungsi yang berbeda dapat dipanggil berdasarkan apakah acara akan menggelembung.
Eventphase: Mengembalikan nilai integer (salah satu dari 0,1,2,3), menunjukkan keadaan saat ini dari acara tersebut
<0, acara belum terjadi.
<1, acara saat ini sedang dalam tahap penangkapan, yaitu dalam proses propagasi dari node leluhur ke simpul target. Proses ini dari objek jendela ke simpul dokumen, kemudian ke simpul htmlhtmlelement, sampai simpul induk dari node target.
<2, acara mencapai node target, yaitu, simpul yang ditunjuk oleh atribut target.
<3, acara ini berada dalam tahap gelembung, yaitu, dalam proses propagasi belakang dari node target ke node leluhur. Proses ini dari simpul induk sampai ke objek jendela. Tahap ini hanya dapat terjadi jika atribut gelembung benar
2. Terkait dengan perilaku default peristiwa:
Batal yang dapat dibatalkan: Mengembalikan nilai boolean yang menunjukkan apakah acara tersebut dapat dibatalkan. Jika Anda ingin membatalkan suatu acara, Anda harus menghubungi metode preventdefault di acara ini
DefaultPrevented: Mengembalikan nilai boolean yang menunjukkan apakah metode preventdefault telah dipanggil.
3. Terkait dengan node target acara:
CurrentTarget: Mengembalikan simpul yang terikat ke fungsi mendengarkan eksekusi peristiwa.
Target: Mengembalikan simpul yang memicu acara. Di IE6-IE8, nama properti ini bukan target, tetapi srcelemen
4. Terkait dengan informasi lain tentang objek acara:
Jenis: Mengembalikan string yang mewakili jenis acara
Detail: Mengembalikan nilai numerik yang mewakili beberapa informasi tentang acara tersebut. Arti spesifik terkait dengan jenis acara. Untuk acara mouse, itu berarti berapa kali tombol mouse ditekan pada posisi tertentu. Misalnya, untuk acara dblClick, nilai atribut detail selalu 2.
Timestamp: Mengembalikan cap waktu milidetik, menunjukkan waktu ketika peristiwa terjadi. Perhitungan dimulai dari PerformanceTiming.NavigationStart, yang berarti waktu yang dibutuhkan pengguna untuk menavigasi ke halaman web. Jika Anda ingin mengonversi nilai ini ke cap waktu UNIX, Anda perlu menghitung event.timestamp + kinerja.timing.navigationStart
istrusted: Mengembalikan nilai boolean yang menunjukkan apakah acara tersebut dapat dipercaya. Tidak terlalu berguna, dukungan browser yang berbeda berbeda.
Metode Objek Acara:
preventDefault (): Membatalkan perilaku default browser untuk acara saat ini. Premis untuk metode ini berlaku adalah bahwa properti yang dapat dibatalkan dari acara tersebut benar. Jika salah, memanggil metode ini tidak berpengaruh.
StopPropagation (): Menghentikan peristiwa untuk merambat lebih lanjut selama penangkapan, pemrosesan target atau tahap gelembung dari proses propagasi. Setelah memanggil metode ini, pawang pada node yang menangani acara akan dipanggil dan acara tidak akan lagi dikirim ke node lain. Catatan: Metode ini tidak dapat mencegah pegangan peristiwa lain pada node dokumen yang sama dipanggil, tetapi dapat mencegah peristiwa dari dikirim ke node lain.
StopimMediatePropagation (): Mencegah fungsi mendengarkan lainnya dari dipanggil pada acara yang sama. Selama salah satu fungsi mendengarkan memanggil metode ini, fungsi mendengarkan lainnya tidak akan dieksekusi lagi.
Tautan referensi:
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
Panduan JavaScript otoritatif Edisi ke -6
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.