Js中dom0級事件與dom2級事件淺談

  其實,就w3c標準來說,並沒有0級dom的標準。只不過,事實上的適用總會成慢慢成爲約定成俗的規則。所謂的0級dom與2級dom事件就是不同版本間的差異,具體的說就是,對於不同的dom級別,如何定義事件處理,以及使用時有什麼不同。
  我們對於事物的認識過程,總是要先知道它叫什麼名字,然後瞭解它是幹什麼的,接着學習如何使用,最後,去搞明白實現原理。首先,我們要談的是dom事件,它是用來處理html中的事件。接下來,演示用法。
  

<input id="btn" type="button" οnclick="console.log('You clicked the button!');" value="Click" />

  上面定義了一個按鈕,在按鈕中定義了onclick事件,就是在控制檯輸出一句話。效果如下圖所示:
  這裏寫圖片描述
  
  上面就是一個所謂的dom0級的事件處理。其實還有一個常用的,就是直接用js操作。下面是代碼:
  

document.getElementById('btn').onclick = function() {
            console.log('I am processed by dom0!');
        };

下面是點擊按鈕後的效果:
這裏寫圖片描述

注意: 對於上面的button,其實通過了兩種方式去定義它的事件處理,一是在input標籤裏,二是在js中去處理。但是,在console上只輸出了一句話。也就是說,在dom0級事件處理中,後定義的事件處理會覆蓋前面的。

下面來一個dom2級的事件處理:

document.getElementById('btn').addEventListener('click', function() {
         console.log('I am processed by dom2!');
 });       
document.getElementById('btn').addEventListener('click', function() {
         console.log('I am processed by dom2 again!!');
});

下面是點擊按鈕後的效果:
這裏寫圖片描述

這下就能看清楚了,在dom2級事件處理中,對一個按鈕點擊的事件處理就沒有被覆蓋掉。所以,dom0級和dom2級事件處理,在形式上和功能上都是有差異的。這就是dom0級和dom2級事件最簡單也最常用的不同之處了。

目前不僅有dom2級,dom3也有了標準和各自瀏覽器上的實現。還有,dom4也在醞釀中了。以後也許會有更多的新特性了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章