DOM0級與DOM2級

時間 2019-12-10

標籤 dom0 dom dom2 欄目 HTML 简体版

原文原文鏈接

定義：javascript

0級DOMjava

分爲2個：一是在標籤內寫onclick事件dom

　　　　二是在JS寫onlicke=function（）{}函數函數

1）spa

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

2）.net

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

2級DOMcode

只有一個：監聽方法，原生有兩個方法用來添加和移除事件處理程序：addEventListener()和removeEventListener()。htm

它們都有三個參數：第一個參數是事件名（如click）；blog

　　　　　　　　　第二個參數是事件處理程序函數；事件

　　　　　　　　第三個參數若是是true則表示在捕獲階段調用，爲false表示在冒泡階段調用。

addEventListener():能夠爲元素添加多個事件處理程序，觸發時會按照添加順序依次調用。
removeEventListener():不能移除匿名添加的函數。

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等價於
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

只有2級DOM包含3個事件：事件捕獲階段、處於目標階段和事件冒泡階段

<span>
    <a></a>
</span>

點擊a後capturing(捕捉)階段事件傳播會從document-> span->a，而後發生在a，最後bubbling(冒泡)階段事件傳播會從a->span->document 。

區別：若是定義了兩個dom0級事件，dom0級事件會覆蓋

dom2不會覆蓋，會依次執行

dom0和dom2能夠共存，不互相覆蓋，可是dom0之間依然會覆蓋

dom0級事件

 
   <a href= 
   "#"  
   id= 
   "hash"  
   onclick= 
   "fn();fn();" 
   > 
  
 
   <button type= 
   "button" 
   >返回上面進行開通</button> 
  
 
   </a> 
  
 
   var  
   btn=$( 
   '#hash' 
   ).get(); 
  
 
   btn.onclick= 
   function 
   (){ 
  
 
   alert( 
   '111' 
   ); 
  
 
   }; 
  
 
   btn.onclick= 
   function 
   (){ 
  
 
   alert( 
   '222' 
   ); 
  
 
   }; 
  

像上面把onclick寫在標籤內，都是dom0級事件，fn和fn1依次執行; 第二種獲取元素，綁定onclick事件也是dom0級，第二個會覆蓋第一個onclick，也會覆蓋行內的onclick，只會彈出222。

dom2級事件

 
         $( 
         '#hash' 
         ).click( 
         function 
         (){ 
        
 
         alert( 
         'jq的dom2級點擊第一次' 
         ) 
        
 
         }); 
        
 
         $( 
         '#hash' 
         ).click( 
         function 
         (){ 
        
 
         alert( 
         'jq的dom2級點擊第二次' 
         ) 
        
 
         }); 
        
 
         btn.addEventListener( 
         'click' 
         , 
         function 
         (){ 
        
 
         alert( 
         '原生dom2級第一次click' 
         ) 
        
 
         }, 
         false 
         ); 
        
 
         btn.addEventListener( 
         'click' 
         , 
         function 
         (){ 
        
 
         alert( 
         '原生dom2級第二次click' 
         ) 
        
 
         }, 
         false 
         ) 
        

以上的綁定都屬於dom2級事件綁定，前面兩種都是jq的綁定方式，後面都是原生js的綁定方式，不會覆蓋，會依次執行jq的綁定方法和原生的綁定方法，這就是於dom0級的去別處；

dom0和dom2共存

 
         <a href= 
         "#" 
          id= 
         "hash" 
          onclick= 
         "fn();fn1();" 
         > 
        
         <button type= 
         "button" 
         >返回上面進行開通</button> 
        
         </a> 
        
         <script type= 
         "text/javascript" 
         > 
        
         function 
          fn(){ 
        
         alert( 
         'ade' 
         ); 
        
         } 
        
         function 
          fn1(){ 
        
         alert( 
         'ade111' 
         ); 
        
         } 
        
         var 
          btn=$( 
         '#hash' 
         ).get(0); 
        
         btn.onclick= 
         function 
         (){ 
        
         alert( 
         '111' 
         ); 
        
         }; 
        
         $( 
         '#hash' 
         ).click( 
         function 
         (){ 
        
         alert( 
         'jq的dom2級點擊第一次' 
         ) 
        
         }); 
        
         btn.addEventListener( 
         'click' 
         , 
         function 
         (){ 
        
         alert( 
         '原生dom2級第一次click' 
         ) 
        
         }, 
         false 
         ); 
        
         </script>

上面的例子有一個兩個dom0級和兩個dom2級綁定事件，js裏面寫的dom0級會覆蓋行內的fn和fn1方法，可是js裏面的dom0能夠喝dom2共存，結果是彈出111 jq的dom2級點擊第一次原生dom2級第一次click；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。