Mengapakah peristiwa yang sama mencetuskan menggelegak dua kali?-tutorial js-php.cn

Mengapakah peristiwa yang sama mencetuskan menggelegak dua kali?

WBOY

Lepaskan： 2024-02-19 22:34:07

asal

773 orang telah melayarinya

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('事件冒泡');
});

Salin selepas log masuk

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>

Salin selepas log masuk

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!