Bacaan terkait:
JavaScript Event Learning Ringkasan (V) Jenis acara tikus di JS
//www.vevb.com/article/86259.htm
JavaScript Ringkasan Pembelajaran Acara (i) Aliran Acara
//www.vevb.com/article/86261.htm
Ringkasan Pembelajaran Acara Javascript (IV) Anggota Umum Acara (Properti dan Metode)
//www.vevb.com/article/86262.htm
Ringkasan Pembelajaran Acara Javascript (II) JS Event Handler
//www.vevb.com/article/86264.htm
Ringkasan Pembelajaran Acara Javascript (III) Objek Acara JS
1. Acara
Suatu acara adalah tindakan tertentu yang dilakukan oleh pengguna atau browser itu sendiri, seperti klik, muat dan mouseover adalah semua nama acara.
Acara adalah jembatan antara JavaScript dan DOM.
Jika Anda memicu, saya akan menjalankan acara, dan memanggil fungsi pemrosesannya untuk menjalankan kode JavaScript yang sesuai untuk memberikan respons.
Contoh tipikal adalah: peristiwa pemuatan dipicu setelah halaman dimuat; Pengguna mengklik elemen dan memicu acara klik.
2. Aliran acara
1. Kesadaran akan influenza peristiwa
Pertanyaan: Klik pada elemen halaman, elemen seperti apa yang dapat merasakan peristiwa seperti itu?
Jawaban: Saat mengklik elemen, Anda juga mengklik elemen wadah elemen, atau bahkan seluruh halaman.
Contoh: Ada tiga lingkaran konsentris, tambahkan fungsi penanganan acara yang sesuai untuk setiap lingkaran, dan teks yang sesuai muncul. Klik lingkaran terdalam dan juga klik lingkaran luar, sehingga acara klik lingkaran luar juga akan dipicu.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </iteme> </head> <tyle> #outer {position: absolute; Lebar: 400px; Tinggi: 400px; TOP: 0; Kiri: 0; Bawah: 0; Kanan: 0; margin: otomatis; Latar Belakang-Color: Deeppink; } #middle {position: absolute; Lebar: 300px; Tinggi: 300px; Atas: 50%; margin -kiri: -150px; margin -top: -150px; Latar Belakang-Color: DeepskyBlue; } #inner {position: absolute; Lebar: 100px; Tinggi: 100px; Atas: 50%; Kiri: 50%; margin -kiri: -50px; margin -top: -50px; Latar Belakang: Darkgreen; Teks-Align: tengah; Line-Height: 100px; Warna: Putih; }#luar,#tengah,#dalam {border-radius: 100%; } </style> <body> <Div id = "Outer"> <Div ID = "Middle"> <Div ID = "Inner"> Klik saya! </div> </div> </div> <script> var innercircle = document.geteLementById ("dalam"); innercircle.onClick = function () {alert ("innercircle"); }; var middlecircle = document.getElementById ("middle"); middlecircle.onClick = function () {alert ("middlecircle"); } var Outcircle = document.getElementById ("Outer"); outercircle.onClick = function () {alert ("outercircle"); } </script> </body> </html>Efeknya adalah sebagai berikut:
2. Aliran acara
Ketika suatu peristiwa terjadi, itu akan merambat dalam urutan tertentu antara node elemen dan simpul root. Semua node yang melewati jalur akan menerima acara tersebut. Proses propagasi ini adalah aliran acara DOM.
Urutan perambatan acara sesuai dengan dua model aliran acara browser: Capture Event Stream dan Bubble Event Stream.
Bubble Event Stream: Propagasi peristiwa berasal dari target acara yang paling spesifik ke target acara paling tidak spesifik. Artinya, dari daun pohon DOM ke akar.
Aliran Acara yang Diambil: Perbanyakan peristiwa adalah dari target acara paling tidak spesifik ke target acara yang paling spesifik. Artinya, dari akar pohon Dom ke daun.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </ title> </head> <body> <v id = "myDiv"> klik saya! </div> </body> </html>
Dalam kode HTML di atas, klik elemen <div> di halaman.
Dalam aliran acara yang menggelegak, klik urutan propagasi acara adalah <div> -》 <body> -》 <html> -》 dokumen
Dalam aliran acara yang ditangkap, klik Pesanan Propagasi Acara adalah Dokumen -》 <Html> -》 <tody> -》 <div>
catatan:
1) Semua browser modern mendukung gelembung acara, tetapi ada sedikit perbedaan dalam implementasi spesifik:
Di IE5.5 dan sebelumnya, gelembung acara akan melewatkan elemen <html> (melompat langsung dari tubuh ke dokumen).
IE9, Firefox, Chrome, dan Safari Bubble Events sampai ke objek jendela.
2) IE9, Firefox, Chrome, Opera, dan Safari All Support Event Capture. Meskipun standar DOM mensyaratkan bahwa peristiwa harus disebarkan dari objek dokumen, browser ini mulai menangkap peristiwa dari objek jendela.
3) Karena browser lama tidak mendukungnya, beberapa orang menggunakan event capture. Disarankan untuk menggunakan gelembung acara.
Stream Event DOM
Standar DOM menggunakan Capture + Bubbling. Kedua aliran acara memicu semua objek DOM, dimulai dengan objek dokumen dan diakhiri dengan objek dokumen.
Standar DOM menetapkan bahwa aliran acara mencakup tiga tahap: tahap penangkapan acara, dalam tahap target, dan tahap gelembung acara.
Fase Penangkapan Acara: Target aktual (<div>) tidak akan menerima acara selama fase penangkapan. Artinya, pada tahap penangkapan, acara berhenti dari dokumen ke <html> dan kemudian ke <body>. Pada gambar di atas, itu adalah 1 ~ 3.
Pada tahap target: peristiwa terjadi dan diproses pada <viv>. Tetapi pemrosesan peristiwa akan dilihat sebagai bagian dari fase menggelegak.
Fase gelembung: Acara merambat kembali ke dokumen.
catatan:
1): Standar DOM menetapkan bahwa penangkapan penangkapan acara melibatkan target acara, tetapi peristiwa pada objek acara akan ditetapkan dalam versi IE9, Safari, Chrome, Firefox, Opera9.5 dan yang lebih baru akan memulai acara pada objek acara selama fase penangkapan. Akibatnya, ada dua peluang untuk mengoperasikan acara pada objek target.
2): Tidak semua acara melewati tahap gelembung. Semua peristiwa melewati tahap penangkapan dan berada dalam tahap target, tetapi beberapa peristiwa melewatkan tahap gelembung: misalnya, peristiwa fokus yang mendapatkan fokus input dan peristiwa blur yang kehilangan fokus input.
Contoh dua peluang untuk mengoperasikan acara pada objek target:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </iteme> </head> <tyle> #outer {position: absolute; Lebar: 400px; Tinggi: 400px; TOP: 0; Kiri: 0; Bawah: 0; Kanan: 0; margin: otomatis; Latar Belakang-Color: Deeppink; } #middle {position: absolute; Lebar: 300px; Tinggi: 300px; Atas: 50%; margin -kiri: -150px; margin -top: -150px; Latar Belakang-Color: DeepskyBlue; } #inner {position: absolute; Lebar: 100px; Tinggi: 100px; Atas: 50%; Kiri: 50%; margin -kiri: -50px; margin -top: -50px; Latar Belakang: Darkgreen; Teks-Align: tengah; Line-Height: 100px; Warna: Putih; }#luar,#tengah,#dalam {border-radius: 100%; } </style> <body> <Div id = "Outer"> <Div ID = "Middle"> <Div ID = "Inner"> Klik saya! </div> </div> </div> <script> var innercircle = document.geteLementById ("dalam"); innercircle.addeventListener ("klik", function () {alert ("Acara klik InnerCircle ditembakkan pada tahap penangkapan");}, true); innercircle.addeventListener ("klik", function () {alert ("Acara klik InnerCircle ditembakkan di tahap gelembung");}, false); var middlecircle = document.getElementById ("middle"); middlecircle.addeventListener ("klik", function () {alert ("Acara klik Middlecircle ditembakkan pada tahap penangkapan");}, true); middlecircle.addeventListener ("klik", function () {alert ("Acara klik Middlecircle ditembakkan dalam tahap gelembung");}, false); var outercircle = document.getElementById ("Outer"); Outercircle.addeventListener ("klik", function () {alert ("Acara klik OutCircle ditembakkan pada tahap penangkapan");}, true); Outercircle.addeventListener ("klik", function () {waspada ("Acara klik Outercircle ditembakkan di tahap gelembung");}, false); </script> </body> </html>Efek operasi adalah bahwa 6 kotak akan muncul satu demi satu. Untuk menjelaskan prinsipnya, saya mengintegrasikannya ke dalam gambar:
3. Aplikasi khas aliran acara - proxy acara
Dalam pemrosesan acara tradisional, penangan acara perlu ditambahkan ke setiap elemen. JS Event Proxy adalah teknik yang sederhana dan efektif, di mana Anda dapat menambahkan prosesor acara ke elemen induk, sehingga menghindari penambahan prosesor acara ke beberapa elemen anak.
Prinsip proxy acara menggunakan gelembung peristiwa dan elemen target, menambahkan prosesor acara ke elemen induk, menunggu elemen anak untuk membuat peristiwa gelembung, dan elemen induk dapat menentukan elemen anak mana yang melalui target (yaitu srcelement), dan dengan demikian melakukan pemrosesan yang sesuai. Untuk konten lebih lanjut tentang target, silakan merujuk ke contoh -contoh berikut untuk anggota publik (properti dan metode) dari acara (iv) untuk contoh -contoh berikut.
Pemrosesan acara tradisional, menambahkan pawang acara ke setiap elemen, kodenya adalah sebagai berikut:
<body> <ul id = "color-list"> <li> merah </li> <li> oranye </li> <li> kuning </li> <li> hijau </li> <li> biru </li> <li> indigo </li> <li> ungu </li> </ul> <script> (function () {var colorlist = document.gete </li> </ul> <script> (function () {var colorlist = document.getel </li> </ul> <script> (function () {var colorlist = document.getel </li> </ul> <script> (function () {var colorlist = document.gete Colors = ColorList.getElementByTagname ("Li"); }}) (); </script> </body>Metode pemrosesan agen acara adalah sebagai berikut:
<body><ul id="color-list"><li>red</li><li>orange</li><li>yellow</li><li>green</li><li>blue</li><li>indigo</li><li>purple</li></ul><script>(function(){ var colorList=document.getElementById("color-list"); colorlist.addeventlistener ('klik', showcolor, false); }}) (); </script> </body>Untuk meringkas manfaat proxy acara:
A. Kurangi beberapa prosesor peristiwa menjadi satu, karena prosesor acara harus tinggal di memori, yang meningkatkan kinerja. Bayangkan jika ada tabel 100-baris, membandingkan cara tradisional yang mengikat penangan acara untuk setiap sel dengan proxy acara (mis. Menambahkan event handler ke meja), tidak sulit untuk menyimpulkan bahwa proxy peristiwa menghindari beberapa risiko potensial dan meningkatkan kinerja.
B. Pembaruan DOM tidak memerlukan pemisahan kembali prosesor acara, karena proxy acara dapat mengadopsi metode pemrosesan yang berbeda untuk elemen anak yang berbeda. Jika elemen anak lain (a, span, div, dll.) Ditambahkan, Anda dapat secara langsung memodifikasi fungsi event handler dari agen acara. Tidak perlu untuk menebus prosesor dan tidak perlu mengulangi lagi.
Di atas adalah Ringkasan Pembelajaran Acara JavaScript (i) Pengetahuan Terkait tentang Streaming Acara yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu semua orang!