hujung hadapan web
tutorial js
Mengapakah peristiwa yang sama mencetuskan menggelegak dua kali?
Mengapakah peristiwa yang sama mencetuskan menggelegak dua kali?
Mengapa peristiwa menggelegak yang sama berlaku dua kali?
Acara menggelegak ialah mekanisme penyampaian acara biasa dalam penyemak imbas. Apabila elemen mencetuskan peristiwa, peristiwa itu akan dihantar daripada elemen yang dicetuskan ke elemen atas mengikut urutan sehingga ia dihantar ke elemen akar dokumen. Proses ini seperti gelembung yang menggelegak di dalam air, jadi ia dipanggil peristiwa menggelegak.
Namun, kadangkala kita dapati peristiwa menggelegak yang sama berlaku dua kali. Terdapat dua sebab utama: pendaftaran acara dan pemprosesan acara.
Pertama sekali, kita perlu menjelaskan dengan jelas bahawa pendaftaran acara merujuk kepada mengikat acara kepada elemen. Dalam pembangunan web biasa, kami biasanya menggunakan kaedah addEventListener() untuk menambah pendengar acara pada elemen. Apabila kami menggunakan kaedah ini untuk menambah pendengar acara pada elemen, duplikasi kadangkala berlaku. Contohnya:
var element = document.getElementById('myElement');
element.addEventListener('click', function() {
console.log('事件冒泡');
});Dalam kod di atas, kami menambahkan pendengar acara klik pada elemen bernama "myElement". Walau bagaimanapun, jika kami memanggil kaedah addEventListener() beberapa kali dalam kod dan menambah jenis pendengar acara yang sama kepada elemen yang sama, maka setiap panggilan akan menambah pendengar baharu, menyebabkan acara yang sama berlaku beberapa kali.
Kedua, pengendalian acara merujuk kepada kod yang dilaksanakan selepas peristiwa dicetuskan. Semasa penghantaran acara, apabila acara dipindahkan daripada elemen anak kepada elemen induk, pengendali peristiwa yang sepadan pada elemen induk akan dicetuskan. Walau bagaimanapun, kadangkala kami secara tidak sengaja mencetuskan jenis acara yang sama untuk elemen anak sekali lagi dalam pengendali acara elemen induk, menyebabkan acara yang sama muncul dua kali.
Contoh kod berikut akan menggambarkan dua situasi di atas:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="parentElement">
<div id="childElement">点击我</div>
</div>
<script>
var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');
parentElement.addEventListener('click', function() {
console.log('父元素的事件处理程序');
childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
});
childElement.addEventListener('click', function() {
console.log('子元素的事件处理程序');
});
</script>
</body>
</html>Dalam kod di atas, kami telah menambah pendengar acara klik masing-masing pada elemen induk dan elemen anak Apabila peristiwa klik unsur induk dicetuskan, " The parent pengendali acara elemen" dan mencetuskan acara klik elemen kanak-kanak, menyebabkan peristiwa klik elemen kanak-kanak itu menyala semula dan mencetak "pengendali acara elemen kanak-kanak". Dengan cara ini, acara yang sama muncul dua kali.
Untuk mengelakkan peristiwa menggelegak daripada berlaku dua kali, kita boleh menambah syarat penghakiman dalam pengendali peristiwa elemen induk, dan hanya mencetuskan peristiwa yang sepadan bagi elemen anak jika syarat itu dipenuhi, sekali gus mengelakkan gelembung berulang.
Ringkasnya, sebab acara yang sama muncul dua kali terutamanya disebabkan oleh operasi berulang dalam pendaftaran acara dan pemprosesan acara. Kita boleh mengelakkan gelembung berulang dengan mengoptimumkan pendaftaran acara dan menambah pertimbangan bersyarat.
Atas ialah kandungan terperinci Mengapakah peristiwa yang sama mencetuskan menggelegak dua kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
1359
52
Cara menambah acara sentuhan pada gambar dalam vue
May 02, 2024 pm 10:21 PM
Bagaimana untuk menambah acara klik pada imej dalam Vue? Import contoh Vue. Buat contoh Vue. Tambahkan imej pada templat HTML. Tambahkan acara klik menggunakan arahan v-on:click. Tentukan kaedah handleClick dalam contoh Vue.
Bangunkan aplikasi desktop yang berkuasa dengan Golang
Mar 19, 2024 pm 05:45 PM
Gunakan Golang untuk membangunkan aplikasi desktop yang berkuasa Dengan pembangunan Internet yang berterusan, orang ramai menjadi tidak dapat dipisahkan daripada pelbagai jenis aplikasi desktop. Bagi pembangun, adalah penting untuk menggunakan bahasa pengaturcaraan yang cekap untuk membangunkan aplikasi desktop yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan Golang (bahasa Go) untuk membangunkan aplikasi desktop yang berkuasa dan menyediakan beberapa contoh kod khusus. Golang ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google Ia mempunyai ciri-ciri kesederhanaan, kecekapan, konkurensi yang kuat, dsb., dan sangat sesuai untuk
Bagaimana untuk menyediakan lompat pada halaman log masuk layui
Apr 04, 2024 am 03:12 AM
Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.
Pembangunan bahasa Hongmeng HarmonyOS dan Go
Apr 08, 2024 pm 04:48 PM
Pengenalan kepada pembangunan bahasa HarmonyOS dan Go HarmonyOS ialah sistem pengendalian teragih yang dibangunkan oleh Huawei, dan Go ialah bahasa pengaturcaraan moden Gabungan kedua-duanya menyediakan penyelesaian yang berkuasa untuk membangunkan aplikasi teragih. Artikel ini akan memperkenalkan cara menggunakan bahasa Go untuk pembangunan dalam HarmonyOS dan mendalami pemahaman melalui kes praktikal. Pemasangan dan Persediaan Untuk menggunakan bahasa Go untuk membangunkan aplikasi HarmonyOS, anda perlu memasang GoSDK dan HarmonyOSSDK terlebih dahulu. Langkah-langkah khusus adalah seperti berikut: #Install GoSDKgogetgithub.com/golang/go#Set PATH
Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya
Mar 09, 2024 am 08:21 AM
Tip PHP: Cepat melaksanakan fungsi kembali ke halaman sebelumnya Dalam pembangunan web, kita sering menghadapi keperluan untuk melaksanakan fungsi kembali ke halaman sebelumnya. Operasi sedemikian boleh meningkatkan pengalaman pengguna dan memudahkan pengguna menavigasi antara halaman web. Dalam PHP, kita boleh mencapai fungsi ini melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara cepat melaksanakan fungsi kembali ke halaman sebelumnya dan memberikan contoh kod PHP tertentu. Dalam PHP, kita boleh menggunakan $_SERVER['HTTP_REFERER'] untuk mendapatkan URL halaman sebelumnya
Apakah mekanisme dipacu peristiwa bagi fungsi C++ dalam pengaturcaraan serentak?
Apr 26, 2024 pm 02:15 PM
Mekanisme dipacu peristiwa dalam pengaturcaraan serentak bertindak balas kepada peristiwa luaran dengan melaksanakan fungsi panggil balik apabila peristiwa berlaku. Dalam C++, mekanisme dipacu peristiwa boleh dilaksanakan dengan penunjuk fungsi: penunjuk fungsi boleh mendaftarkan fungsi panggil balik untuk dilaksanakan apabila peristiwa berlaku. Ungkapan Lambda juga boleh melaksanakan panggilan balik acara, membenarkan penciptaan objek fungsi tanpa nama. Kes sebenar menggunakan penunjuk fungsi untuk melaksanakan peristiwa klik butang GUI, memanggil fungsi panggil balik dan mencetak mesej apabila peristiwa itu berlaku.
Apr 09, 2024 pm 12:45 PM
Jawapan: JavaScript menyediakan pelbagai kaedah untuk mendapatkan elemen halaman web, termasuk menggunakan id, nama teg, nama kelas dan pemilih CSS. Penerangan terperinci: getElementById(id): Dapatkan elemen berdasarkan id unik. getElementsByTagName(tag): Mendapatkan kumpulan elemen dengan nama tag yang ditentukan. getElementsByClassName(class): Mendapatkan kumpulan elemen dengan nama kelas yang ditentukan. querySelector(selector): Gunakan pemilih CSS untuk mendapatkan elemen padanan pertama. querySelectorAll(selector): Dapatkan semua padanan menggunakan pemilih CSS
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.
