首頁 >web前端 >js教程 >JavaScript事件擷取與事件冒泡

JavaScript事件擷取與事件冒泡

little bottle
little bottle轉載
2019-04-08 13:30:462807瀏覽

#冒泡機制

氣泡從水底開始往上升,從深到淺,升到最上面。在上升的過程中,氣泡會經過不同深度的水。相對應地:這個氣泡就相當於我們這裡的事件,而水則相當於我們的整個dom樹;事件從dom 樹的底層,層層往上傳遞,直到傳遞到dom的根節點。當子元素與父元素有相同的事件時,當子元素被觸發時父元素也會被觸發冒泡機制

JavaScript事件擷取與事件冒泡

在不同瀏覽器中,冒泡的程度不同:
IE 6.0:
p -> body -> html -> document
其他瀏覽器:
p -> body -> html -> ; document -> window

註:

並不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load 、unload

當子元素與父元素有相同的事件時,當子元素被觸發時父元素也會被觸發冒泡機制。冒泡事件,以下程式碼:

HTML
<p id="father">
    <button id="btn">点击</button></p>
#CSS
father{        width: 300px;        height: 300px;        background-color: red;        margin:  auto;        }
JS

JavaScript事件擷取與事件冒泡







# #

 window.onload = function () {
        var father = document.getElementById("father");        
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("点击了按钮");
        };
        father.onclick = function () {
            alert("点击了父标签");
        };
        document.onclick = function () {
            alert("点击了文档");
        }
    }


效果圖

在點擊按鈕和紅色區域的時候,事件會一層層的向上傳遞,這個並不是我們想要的效果,那該如何阻止事件冒泡呢?

阻止冒泡的方法JavaScript事件擷取與事件冒泡

標準瀏覽器和ie瀏覽器
w3c:event.stopPropagation() proPagation
IE:event .cancelBubble = true

相容的寫法if(event && event.stopPropagation){ // w3c標準    event.stopPropagation(); }else{ // IE系列 IE 678

event.cancelBubble = true; }

阻止冒泡後#########JS#####
window.onload = function () {
  var father = document.getElementById("father");  var btn = document.getElementById("btn");

   btn.onclick = function () {
      if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
           event.stopPropagation();
      }else{ // IE系列 IE 678
          event.cancelBubble = true;
           }
      alert("点击了按钮");
    };
   father.onclick = function () {
      if(event && event.stopPropagation){ // w3c标准 阻止冒泡机制
           event.stopPropagation();
       }else{ // IE系列 IE 678
           event.cancelBubble = true;
           }
      alert("点击了父标签");
   };
  document.onclick = function () {
      alert("点击了文档");
    }
 }
############################################################################# #####需要在那個地方阻止冒泡事件,就在其中添加阻止冒泡的方法; ###可以將阻止冒泡的方法封裝為一個函數需要的時候直接調用即可。 #####################【推薦課程:###JavaScript影片教學###】   #########

以上是JavaScript事件擷取與事件冒泡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除