Analisis mendalam tentang peristiwa menggelegak js_Pengetahuan asas

Apabila melakukan operasi DOM dalam JavaScript, anda pasti akan menghadapi peristiwa menggelegak js Yang paling biasa ialah acara pop timbul div seperti yang ditunjukkan dalam ilustrasi

Apabila anda klik pada bahagian kelabu, tetingkap pop timbul hilang, tetapi apabila anda klik pada bahagian hitam, ia tidak memberi kesan.

Gunakan kod berikut untuk menganalisis peristiwa menggelegak js

kod html:

Salin kod Kod adalah seperti berikut:

js acara menggelegak

...                                                                                                          

& Lt; kelas butang = "btn" & gt;
Klik saya!
                                                                                                                                                                                                                  

var box=document.querySelector(".box"),
btn=document.querySelector(".btn");
box.onclick=function(acara){
alert("Saya div");
}
btn.onclick=function(acara){
alert("Saya adalah butang");
}






Menggunakan paparan 3D alat pembangun lalai penyemak imbas Firefox, anda boleh melihat dengan jelas susunan lapisan div

Ilustrasi:

Apabila butang diklik, "Saya adalah butang" akan muncul dan kemudian "Saya div" akan muncul, kerana peristiwa butang dicetuskan dahulu dan kemudian lapisan seterusnya div peristiwa klik dicetuskan,

Pencetusan peristiwa adalah berdasarkan prinsip masuk dahulu, keluar dahulu.

Ilustrasi:

Kemudian kadangkala kita tidak mahu berbilang peristiwa mencetuskan dan menyebabkan konflik, jadi peristiwa mempunyai kaedah stopPropagation(); untuk mengelakkan menggelegak

Terdapat juga kaedah acara yang juga biasa digunakan, seperti pautan Jika saya tidak mahu melompat apabila mengklik pautan, saya menggunakan kaedah event.preventDefault();

Kod contoh adalah seperti berikut

Salin kod

Kod adalah seperti berikut:

   
   
   


   

       

js冒泡事件分析

       

---

       

           
                Klik saya!
           
            http://www.liteng.org" id="link">我是链接
       

   

   
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=function(acara){
        makluman("我是div");
    }
    btn.onclick=function(acara){
        makluman("butang 我是");
        event.stopPropagation();
    }
    document.getElementById('link').onclick=function(event){
        makluman("pautan 我是");
        event.preventDefault();
    }
    /*区分event.stopPropagation();和event.preventDefault();
      前者使用stopPropagation()方法阻止事件冒泡
      后者是阻止默认的行为比如阻止超链接
    */
   

小伙伴们是否能够全面理解js的冒泡事件了呢，有疑问就给我留言吧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn