iT邦幫忙

DAY 3
9

HTML5試試看系列 第 3

[HTML5試試看-3] 站在DOM的肩膀上

如果單純只是寫個網頁,其實只需要了解HTML標籤跟文件結構就可以應付自如,不過HTML5的目標既然是網站應用程式平台,那了解API的基礎多少還是需要的。

DOM3規格大致上在2004年就完成,接下來的HTML5/Web Application 1.0仍然是延續這個標準。那HTML5會怎樣使用到DOM3呢?
HTML5 API中使用到DOM3標準的部份,主要在DOM3 Core及DOM3 Event。(詳細的依賴關係,可以參閱HTML5規格書中的2.2.1 Dependencies

所有跟HTML5標籤相對應的物件,都使用到HTMLElement介面,HTMLElement則承繼自DOM3 Core中定義的Element介面,Element介面則承繼自Node介面。所以只要從這三個介面,就可以了解所有的HTML5 Element,應該會有那些attribute及method可以使用。(不過檯面上的瀏覽器恐怕也都沒有詳細把所有的介面都實作出來)

在事件處理的部份,大部分都是延續DOM3 Events來的,幾個主要的介面是Event, EventTargetEventListener。HTML5裡面定義的新事件,大概都是承繼Event或是UIEvent。所有會觸發事件的物件都要實作EventTarget,而EventListener可以透過EventTarget的addEventListener/removeEventListener等方法加以管理。事件則會透過參數傳給EventListener的handleEvent函數...

嗯嗯,我是為了看HTML5文件而回頭檢視這些標準文件。以前沒有注意到(不過也可能是當時沒有瀏覽器實作這些東西,時間久了就忘記了)...原來還有EventListener這個介面。所以現在會有很多處理事件的方法。包括在html裡面用onclick(舉例)來處理、透過賦予element.onclick一個函數來處理、透過addEventListener('click',函數...)來處理、透過addEventListener('click',EventListener...)來處理。另外,透過EventListener介面,handleEvent函數裡面的this會指向EventListener,透過函數的話,this會指向EventTarget,也就是觸發事件的物件。這一段是題外話,跟HTML5無關就是了...但還是看一下隨手寫的測試:

<input type="button" id="test" value="test">
<input type="button" id="test1" value="test1">


<script>
var a = {
	val: "from a",
	handleEvent: function(e) {
		alert(this.val);
	}
};
document.getElementById('test').addEventListener('click', a, false);
document.getElementById('test1').addEventListener('click',function(){alert(this.id);},false);
</script>

有了一些相關的基本知識,就可以開始探索HTML5了。明天來看看,怎樣確定瀏覽器是否有支援某個HTML5標籤,如果沒有支援的話,有沒有什麼方法處理。

補充(2010-10-15 00:03)
在幾個瀏覽器測試的結果,目前主流的瀏覽器的最新版本包括Google Chrome 7.0.517.36 beta, Opera 10.63, Firefox 4 Beta6, Safari 5.02支援EventListener介面,IE9 Beta從開發者工具將Browser Mode及Document Mode都設定為IE9時,可以支援使用addEventListener來加入事件,但是還沒支援EventListener介面。另外,jQuery-1.4.2也沒有支援。

參賽文章


上一篇
[HTML5試試看-2] 標準在哪裡?
下一篇
[HTML5試試看-4] 偵測HTML5支援及可能替代方案
系列文
HTML5試試看30
0
fillano
iT邦超人 1 級 ‧ 2010-10-15 10:43:25

抱歉,有點咬文嚼字...但是從讀規格書來寫出程式對我來說比較有趣的XD

0

fillano提到:
開始探索HTML5

喔~!那要等...轉換心境咯~!臉紅

我要留言

立即登入留言