Analisis contoh menggelegak acara DOM dalam JQuery_jquery

Artikel ini menganalisis peristiwa DOM menggelegak dalam JQuery melalui contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Apa yang menggelegak

Boleh terdapat berbilang acara pada halaman dan berbilang elemen boleh bertindak balas kepada acara yang sama. Katakan terdapat dua elemen pada halaman web, satu elemen bersarang dalam elemen lain, dan kedua-duanya terikat pada peristiwa klik Pada masa yang sama, peristiwa klik juga terikat pada elemen badan.

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>

<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

Apabila elemen span dalaman diklik, iaitu peristiwa klik elemen span dicetuskan, 3 rekod akan dikeluarkan. Hanya mengklik pada elemen span dalam akan mencetuskan peristiwa klik terikat pada elemen div luar dan elemen badan. Ini disebabkan oleh peristiwa menggelegak. Semasa mengklik elemen span, anda juga mengklik div elemen yang mengandungi elemen span dan badan elemen yang mengandungi elemen div, dan setiap elemen akan bertindak balas kepada acara klik dalam susunan tertentu.

Peristiwa klik bagi elemen

akan "bergelembung" dalam susunan berikut.

1. 45a2772a6b6107b401db3c9b82c049c2
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 3c30aa6c4c72dd8ead30672a51b803a7

Sebab mengapa ia dipanggil menggelegak adalah kerana acara itu akan terus naik ke puncak seperti gelembung mengikut hierarki DOM.

Masalah yang disebabkan oleh peristiwa menggelegak

Peristiwa menggelegak boleh menyebabkan kesan yang tidak dijangka. Dalam contoh di atas, kami pada asalnya hanya mahu mencetuskan peristiwa klik bagi elemen 45a2772a6b6107b401db3c9b82c049c2 tetapi peristiwa klik bagi elemen dc6dce4a544fdca2df29d5ac0ea9906b Oleh itu, adalah perlu untuk mengehadkan skop acara. Apabila elemen 45a2772a6b6107b401db3c9b82c049c2 diklik, hanya peristiwa klik bagi elemen 45a2772a6b6107b401db3c9b82c049c2 elemen diklik, hanya Mencetuskan peristiwa klik bagi elemen dc6dce4a544fdca2df29d5ac0ea9906b

Objek Acara

Memandangkan IE-DOM dan DOM standard melaksanakan objek acara dalam cara yang berbeza, ia menjadi lebih sukar untuk mendapatkan objek acara dalam penyemak imbas yang berbeza. Untuk menangani masalah ini, JQuery telah membuat sambungan dan enkapsulasi yang diperlukan, menjadikannya mudah untuk mendapatkan objek acara dan beberapa sifat objek acara dalam mana-mana penyemak imbas.

Menggunakan objek acara dalam program adalah sangat mudah Anda hanya perlu menambah parameter pada fungsi Kod jQuery adalah seperti berikut:

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});

Dengan cara ini, apabila elemen "elemen" diklik, objek acara dicipta. Objek acara ini hanya boleh diakses oleh fungsi pengendalian acara. Selepas fungsi pengendalian acara dilaksanakan, objek acara dimusnahkan.

Hentikan acara menggelegak

Hentikan acara menggelegak boleh menghalang pengendali acara objek lain dalam acara daripada dilaksanakan. Kaedah stopPropagation() disediakan dalam JQuery untuk menghentikan acara menggelegak.

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})

Apabila elemen 45a2772a6b6107b401db3c9b82c049c2 diklik, hanya peristiwa klik pada elemen 45a2772a6b6107b401db3c9b82c049c2 Kaedah yang sama boleh digunakan untuk menyelesaikan masalah menggelegak pada elemen dc6dce4a544fdca2df29d5ac0ea9906b

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

Dengan cara ini, apabila elemen 45a2772a6b6107b401db3c9b82c049c2 atau dc6dce4a544fdca2df29d5ac0ea9906b diklik, hanya kandungan yang sepadan akan dikeluarkan dan tiada kandungan lain akan dikeluarkan.

Sekat tingkah laku lalai

Elemen dalam halaman web mempunyai gelagat lalainya sendiri Contohnya, mengklik hiperpautan akan melompat, dan mengklik butang "Serah" akan menghantar borang Kadang-kadang perlu untuk menghalang gelagat lalai.

Dalam JQuery, kaedah preventDefault() disediakan untuk menghalang kelakuan lalai elemen.

Sebagai contoh, dalam projek, selalunya perlu untuk mengesahkan borang Apabila butang "Serah" diklik, kandungan borang disahkan, seperti sama ada elemen adalah medan yang diperlukan, sama ada elemen sepanjang 6 aksara. , dsb. Apabila borang tidak Menghalang penyerahan borang apabila syarat penyerahan dipenuhi (tingkah laku lalai).

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

Apabila nama pengguna kosong dan anda mengklik butang "Serah", gesaan akan muncul dan borang tidak boleh diserahkan. Borang hanya boleh dihantar selepas memasukkan nama pengguna. Ia boleh dilihat bahawa kaedah preventDefault() boleh menghalang penyerahan borang.

Jika anda ingin berhenti menggelegak dan gelagat lalai untuk objek acara pada masa yang sama, anda boleh mengembalikan palsu dalam fungsi pengendalian acara. Ini ialah cara singkat untuk memanggil kaedah stopPapagation() dan kaedah preventDefault() pada objek acara.

Dalam contoh borang, event.preventDefault(); boleh ditulis semula sebagai: return false;

Anda juga boleh menulis semula event.stopPropaqation(); dalam contoh menggelegak acara sebagai: return false;

Tangkapan acara

Tangkapan peristiwa dan peristiwa menggelegak adalah dua proses yang bertentangan Tangkapan peristiwa dicetuskan dari atas ke bawah. Masih contoh peristiwa menggelegak, peristiwa klik elemen akan ditangkap dalam susunan berikut.

1. 3c30aa6c4c72dd8ead30672a51b803a7
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 45a2772a6b6107b401db3c9b82c049c2

Jelas sekali, penangkapan acara bermula dari elemen paling luar dan kemudian ke elemen paling dalam. Oleh itu, peristiwa klik terikat terlebih dahulu akan dihantar ke elemen 6c04bd5ca3fcae76e30b72ad730ca86d

Malangnya, tidak semua penyemak imbas utama menyokong penangkapan acara, dan kecacatan ini tidak boleh diperbaiki dengan JavaScript. JQuery tidak menyokong tangkapan peristiwa Jika pembaca perlu menggunakan tangkapan peristiwa, sila gunakan JavaScript asli secara langsung.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.