jqueryイベントのバブルの理解

一、jqueryイベントバブルとは何か、多くの教材やマニュアルでイベントバブルの概念にかかわる可能性があります.ベテランにとってこれはもちろん最も基本的な概念ですが、初心者にはよく知らないか、聞いたことがありません.次に、コードの例と結びつけて、イベントバブルとは何かを簡単に紹介します.コードの例は次のとおりです.

$(document).ready(function(){
 $("#second").click(function(){
  alert("  second");    
 })
 $("#first").click(function(){
  alert("  first");    
 })
})



クリックして  を  

以上のコードでは、アンカーポイントをクリックして「thirdです」をポップアップしたいだけかもしれませんが、不思議なことに、すべての親要素が定義したclickイベントがトリガーされます.これが典型的なイベントバブル効果です.バブルイベントとは、前の例のclickイベントのようなオブジェクト上でイベントがトリガーされると、このイベントはオブジェクトの親オブジェクトに伝播し、親オブジェクトに定義された同類のイベントがトリガーされます.イベントの伝播の方向は最下層から最上層にあり,水底から水泡が浮かぶようになっている.二、javascriptはどのように事件の泡の泡の泡の事件を阻止して便利さをもたらすことができて、时には面倒をもたらすことができて、以下は簡単に事件の泡の泡を阻止する方法を紹介します.コードの例は次のとおりです.

 
 
 
 




function trclick(){
 alert("   onclick    ");
}
function tableclick(){
 alert("   onclick    ");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("          ");
 }
 haveStop.onclick=function(evt){
 alert("        ");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}

事件の泡を止めなかった
事件のバブルを阻止した
コードコメント:1.if(window.event)これはIE 8とIE 8のブラウザと互換性があります.2. evt.stopPropagation()これは標準ブラウザです.
以上のコードでは、1つのセルがイベントのバブルを阻止し、1つはイベントのバブルを阻止していないので、皆さんの勉強に役立つことを望んでいます.