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；