hujung hadapan web
tutorial js
Penjelasan terperinci tentang kemahiran bubbling_javascript acara javascript
Penjelasan terperinci tentang kemahiran bubbling_javascript acara javascript
Acara adalah salah satu kandungan teras dalam JavaScript Penggunaan acara tidak dapat dielakkan melibatkan konsep penting, iaitu acara menggelegak, mari kita memperkenalkan satu lagi konsep aliran acara:
1. Apakah itu aliran acara:
Model Objek Dokumen (DOM) ialah struktur pokok, yang boleh diwakili dengan jelas oleh rajah berikut.
Jika elemen html mencetuskan peristiwa, maka peristiwa itu akan disebarkan dalam susunan tertentu antara nod pencetus dan nod akar dalam pepohon DOM akan menerima peristiwa yang dicetuskan ini dipanggil Ia aliran peristiwa. Mengikut susunan penyebaran peristiwa, ia boleh dibahagikan kepada dua kategori, satu ialah acara menggelegak dan satu lagi ialah tangkapan peristiwa, yang melibatkan topik yang akan diperkenalkan dalam bab ini:
1. Acara menggelegak:
Apa yang dipanggil bubbling masa bermakna apabila elemen mencetuskan peristiwa, peristiwa itu akan menjadi seperti gelembung, merambat dari elemen pencetus ke semua nod induknya Peristiwa itu akan diterima sehingga ke nod akar peristiwa didaftarkan dalam fungsi pengendali elemen induk, maka walaupun peristiwa itu dicetuskan pada nod anak, fungsi pengendali peristiwa yang didaftarkan pada elemen induk juga akan dicetuskan. Sebagai contoh, dalam ilustrasi di atas, jika peristiwa onclick bagi elemen a dicetuskan, maka elemen induknya p, dokumen dan tetingkap semuanya akan menerima acara ini, dan jika fungsi pemprosesan masa didaftarkan pada elemen induk yang sepadan, maka fungsi pemprosesan acara ini Akan dilaksanakan, lihat contoh kod:
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
var table=document.getElementById("mytable");
table.onclick=function(e){
var event=e||window.event;
target=event.srcElement||event.target;
alert(target.innerHTML);
}
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
</table>
</body>
</html>Tujuan kod di atas adalah untuk memaparkan kandungan dalam sel yang sepadan apabila sel yang sepadan diklik. Walau bagaimanapun, dalam pelaksanaan di atas, pengendali acara onclick tidak didaftarkan untuk setiap sel Sebaliknya, pengendali acara onclick didaftarkan pada jadual elemen induk sel Apabila sel diklik, acara onclick akan dicetuskan juga Ia merambat ke atas dari objek acara, dan elemen jadual mempunyai pengendali acara onclick yang berdaftar Pengendali ini akan dilaksanakan pada masa ini, sudah tentu, masalah lulus parameter objek acara akan ditetapkan di sini. Semua pelayar menyokong acara menggelegak. 2. Tangkapan acara:
Tangkapan acara adalah bertentangan dengan acara menggelegak Apabila elemen diklik, arah penyebaran peristiwa adalah dari elemen akar ke elemen pencetus IE tidak menyokong ini untuk sokongan silang pelayar, biasanya digunakan secara lalai. Model pemprosesan acara gelembung.
2.javascript menghalang kod menggelegak acara
Acara menggelegak sangat berguna dalam senario tertentu, tetapi kadangkala ia mesti dihalang Berikut ialah sekeping contoh kod yang serasi dengan semua pelayar utama untuk mengelakkan acara menggelegak.
Contoh kod:
function stopBubble(e)
{
if(e&&e.stopPropagation)
{
e.stopPropagation();
}
else
{
window.event.cancelBubble=true;
}
}
Kod di atas boleh menghalang acara daripada menggelegak Berikut ialah ulasan ringkas tentang kod:
2. Kod ulasan:
- 1. fungsi stopBubble(e) {}, fungsi ini digunakan untuk menghalang peristiwa daripada menggelegak dan parameter ialah objek peristiwa.
- 2. jika(e&&e.stopPropagation){e.stopPropagation();}, tentukan sama ada stopPropagation disokong, gunakan e.stopPropagation(). Fungsi stopPropagation() tidak disokong oleh IE10 dan pelayar di bawah IE10.
- 3.window.event.cancelBubble=true, penyemak imbas IE semasa menggunakan ini untuk mengelakkan acara menggelegak.
Di atas ialah pengenalan terperinci kepada acara JavaScript yang menggelegak, saya harap ia akan membantu pembelajaran semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Fahami mekanisme menggelegak acara: Mengapakah klik pada elemen kanak-kanak mempengaruhi acara elemen induk?
Jan 13, 2024 pm 02:55 PM
Memahami peristiwa menggelegak: Mengapakah klik pada elemen kanak-kanak mencetuskan peristiwa pada elemen induk? Peristiwa menggelegak bermaksud bahawa dalam struktur elemen bersarang, apabila elemen anak mencetuskan peristiwa, peristiwa itu akan dihantar ke elemen induk lapisan demi lapisan seperti menggelegak, sehingga elemen induk paling luar. Mekanisme ini membolehkan peristiwa pada elemen kanak-kanak disebarkan ke seluruh pepohon elemen dan mencetuskan semua elemen berkaitan secara bergilir-gilir. Untuk lebih memahami peristiwa menggelegak, mari lihat kod contoh tertentu. Kod HTML: <divid="induk&q
Mengapakah peristiwa klik dalam js tidak boleh dilaksanakan berulang kali?
May 07, 2024 pm 06:36 PM
Acara klik dalam JavaScript tidak boleh dilaksanakan berulang kali kerana mekanisme menggelegak acara. Untuk menyelesaikan masalah ini, anda boleh mengambil langkah berikut: Gunakan tangkapan peristiwa: Tentukan pendengar acara untuk dicetuskan sebelum acara berbuih. Menyerahkan acara: Gunakan event.stopPropagation() untuk menghentikan acara menggelegak. Gunakan pemasa: cetuskan pendengar acara sekali lagi selepas beberapa ketika.
Mengapakah peristiwa menggelegak dicetuskan dua kali?
Feb 22, 2024 am 09:06 AM
Mengapakah peristiwa menggelegak dicetuskan dua kali? Peristiwa menggelegak (Event Bubbling) bermaksud bahawa dalam DOM, apabila elemen mencetuskan acara (seperti acara klik), acara itu akan menggelegak daripada elemen ke elemen induk sehingga ia menggelembung ke objek dokumen peringkat atas. Acara menggelegak ialah sebahagian daripada model acara DOM, yang membolehkan pembangun mengikat pendengar acara kepada elemen induk, supaya apabila elemen anak mencetuskan peristiwa, peristiwa itu boleh ditangkap dan diproses melalui mekanisme menggelegak. Walau bagaimanapun, kadangkala pembangun menghadapi peristiwa yang menggelembung dan mencetuskan dua kali.
Sebab dan penyelesaian untuk kegagalan jQuery .val().
Feb 20, 2024 am 09:06 AM
Tajuk: Sebab dan penyelesaian untuk kegagalan jQuery.val() Dalam pembangunan bahagian hadapan, jQuery sering digunakan untuk mengendalikan elemen DOM Kaedah .val() digunakan secara meluas untuk mendapatkan dan menetapkan nilai elemen bentuk. Walau bagaimanapun, kadangkala kita menghadapi situasi di mana kaedah .val() gagal, mengakibatkan ketidakupayaan untuk mendapatkan atau menetapkan nilai elemen borang dengan betul. Artikel ini akan meneroka punca kegagalan .val(), menyediakan penyelesaian yang sepadan dan melampirkan contoh kod tertentu. 1.Kaedah analisis sebab.val().
Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue?
May 09, 2024 pm 02:33 PM
Pengubah suai acara Vue.js digunakan untuk menambah gelagat tertentu, termasuk: menghalang gelagat lalai (.prevent) menghentikan acara menggelegak (.stop) acara sekali (.sekali) menangkap acara (.capture) mendengar acara pasif (.pasif) Suai pengubah suai (.self)Pengubah suai kunci (.key)
Acara JS mana yang tidak muncul?
Feb 19, 2024 pm 09:56 PM
Apakah situasi dalam acara JS yang tidak akan timbul? Peristiwa menggelegak (Event Bubbling) bermaksud bahawa selepas peristiwa dicetuskan pada elemen tertentu, peristiwa itu akan dihantar ke atas di sepanjang pepohon DOM bermula dari elemen paling dalam ke elemen paling luar Kaedah penghantaran ini dipanggil acara menggelegak. Walau bagaimanapun, tidak semua acara boleh menggelegak. Terdapat beberapa kes khas di mana acara tidak akan muncul. Artikel ini akan memperkenalkan situasi dalam JavaScript di mana acara tidak akan muncul. 1. Gunakan stopPropagati
Apakah peristiwa menggelegak? Analisis mendalam tentang mekanisme menggelegak peristiwa
Feb 20, 2024 pm 05:27 PM
Apakah peristiwa menggelegak? Analisis mendalam tentang mekanisme menggelegak acara Acara menggelegak ialah konsep penting dalam pembangunan web, yang mentakrifkan cara acara disampaikan pada halaman. Apabila peristiwa pada elemen dicetuskan, peristiwa itu akan dihantar bermula dari elemen paling dalam dan diteruskan ke luar sehingga ia dihantar ke elemen paling luar. Kaedah penyampaian ini adalah seperti buih yang menggelegak di dalam air, maka ia dipanggil peristiwa menggelegak. Dalam artikel ini, kami akan menganalisis mekanisme peristiwa menggelegak secara mendalam. Prinsip acara menggelegak boleh difahami melalui contoh mudah. Katakan kita mempunyai H
Apakah acara JS yang tidak timbul?
Feb 18, 2024 pm 06:31 PM
Apakah acara JS yang tidak akan timbul? JavaScript ialah bahasa skrip berkuasa yang menambah interaktiviti dan dinamik pada halaman web. Dalam JavaScript, pengaturcaraan dipacu peristiwa adalah bahagian yang sangat penting. Peristiwa merujuk kepada pelbagai operasi yang dilakukan oleh pengguna pada halaman web, seperti klik butang, pergerakan tetikus, input papan kekunci, dsb. JavaScript bertindak balas kepada peristiwa ini melalui fungsi pengendalian acara dan melaksanakan operasi yang sepadan. Acara menggelegak ialah mekanisme biasa semasa pemprosesan acara. Peristiwa menggelegak bermakna apabila an
