dom2和dom0的定义和区别

定义：

0级DOM

分为2个：一是在标签内写onclick事件

　　　　  二是在JS写onlicke=function（）{}函数

1）

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

2）

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

2级DOM

只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　   第三个参数如果是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级事件

?

1 2 3 4 5 6 7 8 9 10

<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级事件

?

1 2 3 4 5 6 7 8 9 10 11 12

$( '#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共存

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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；

转载自：

http://www.jb51.net/article/83602.htm

http://www.cnblogs.com/holyson/p/3914406.html