Fold All / Expand All

2008年3月3日 星期一

Pro JavaScript Techniques, chapter 6

Pro JavaScript Techniques
http://jspro.org/

chapter 6: Events

Unobstrusive JavaScript中非常重要的部分,就是event binding。本章在一開始先解釋js的event model是利用callback function,不過這段覺得寫得有點怪,可能是為了其他語言的人所寫的吧。

接著介紹event phase兩個階段,先event capturing,再event bubbling,一般使用上並不會注意到是因為traditional event binding(就是window.onload = function(){})只有處理event bubbling。

當然,很討厭的window.event和e parameter要先提,書中範例是用「e = e || window.event;」來處理。

還有cancel event bubbling與stop default action,這兩項和上面的event object一樣,都是IE一種,W3C另一種。
[W3C]
e.stopPropagation();
e.preventDefault();
[IE]
window.event.cancelBubble = true;
window.event.returnValue = false;

再來就是重頭戲event binding,traditional binding大家都很熟悉了,使用上非常簡單,而且各家瀏覽器都吃,其缺點是只有event bubbling phase、一個event綁一個handler,第一個可能不一定造成問題,但是一個event對一個handler,有時候會造成問題,當使用很多不同的script snippet,可能其中一個有用到window.onload,另一個也有,這個時候,只有最後的那一個handler有bind到,之前的都不算,也就是被蓋掉了(不過在window.onload對上<body onload="">的時候,印象中會有browser的差異,有的會兩個都跑)。

接下來介紹的W3C binding就不會有被蓋掉的問題,語法是「element.addEventListener(event_type, handler, capture)」,第三個參數是填boolean,是否要event capturing phase。

IE binding則是「element.attachEvent(event_type, handler)」,少了capture的選擇,而且event_type的命名,W3C和IE是不同的,W3C是沒有on,即'keypress',而IE則是on也要寫'onkeypress'。

2005年ppk舉辦了比賽,邀請大家來寫跨瀏覽器的event binding function: addEvent(), removeEvent(),本書作者John Resig最後贏得此比賽,不過之後裁判之一的Dean Edwards寫了一個更威的版本,在書上是放Dean的版本。

最後,提到測試你的網頁,是否能在不開啟JavaScript的情況下仍能瀏覽,在沒有JavaScript但是有CSS的情況、只用鍵盤的情況。

沒有js但有CSS最容易會遇到的問題,就是原本設為display: none;,然後再用js開的,如果沒有js但有CSS的話,使用者會看不到那個element,以前我解決這個問題是放一個noscript,然後在裡面把display設回block,而本書提出方法則是在宣告style之前,寫個script「document.documentElement.className = "js";」,然後之後的style宣告,加上.js這個selector,如果沒有js的話,前面有加.js就選不到,而不會設display: none;,有js的情況下,才會選到。

另一個是只用鍵盤的情況下,原本滑鼠會用到的onmouseover, onmouseout,在使用鍵盤的情況下,就變成onfocus和onblur,所以兩個event設同樣的handler即可。

沒有留言: