第四章
事件處理函數
-
在特定事件發生時調用特定的JavaScript代碼
event = "JavaScript statement(s)" 有很多種事件處理函數:
onload, onunload, onchange, onmouseover, onmouseout, onmousedown, onmouseup, onclick事件，具體參見HTML DOM 事件
-
JavaScript代碼包含在一對引號直接，這對引號之間可以放置多個JavaScript語句，用“;”隔開就行
onclick = "showPic(this)"http://this表示當前對象 -
在事件處理函數被觸發之后，引號之間的JavaScript語句被執行，被調用的語句可以給這個事件處理函數返回一個值。返回true代表這個事件被觸發了，false代表沒有觸發，利用這點，可以攔截一些默認事件,比如下面這個鏈接，點擊之后由于返回的是
false,瀏覽器認為這個事件沒有被觸發，所以不會發生跳轉<a herf="http://www.example.com" onclik="return false;">Click me</a>
一些常用屬性
- childNodes屬性：用于獲取任何一個元素的所有子元素，是一個包含這個元素所有子元素的數組（子元素除了元素節點還包括很多其他節點）
- nodeType屬性：獲取一個節點的節點類型，節點類型是通過數字表示
- 1代表元素節點
- 2代表屬性節點
- 3代表文本節點
- nodeValue屬性：用于獲得一個節點的值,一般元素節點的值是null，文本節點的值是它里面的文本內容
- firstChild屬性：獲得一個節點的第一個子節點，等同于childNodes[0]
- lastChild屬性，獲得一個節點的最后一個子節點，等同于node.childNodes[node.childNodes.length-1]
第五章
平穩退化
定義：讓訪問者的瀏覽器不支持JavaScript的情況下仍然可以正常訪問你的網站。
-
例子：
<a herf="http://www.example.com" onclik=this.href;return false;">Click me</a>即使JavaScript被禁用，上面的代碼任然可以正常跳轉
-
盡量不要使用 JavaScript 偽協議，比如:
<a herf="javascript:showPic('xxxx')";return false;">Click me</a>以上代碼在JavaScript失效后無法正確顯示
漸進增強
- 定義：用一些額外信息去包裹原始數據，增強數據的效果，但不影響數據內容本身，比如 CSS 之于 HTML。
分離行為與內容
可以在外部JavaScript文件里面把事件添加到 HTML 文檔中的某個元素上，而不用在 html 里面嵌入類似“onclick=xxx”之類的 JavaScript 代碼。簡單地說就是：HTML里面最好不要出現 JavaScript 代碼！
-
方式：
element.event = action -
例子：為所有 "a" 標簽添加popUp()函數調用：
var links = document.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ if(links[i].getAttribute("class") == "popup"){ links[i].onClick = function() { popUp(this.getAttribute("href")); return false; } } }這樣，只要為所有a標簽添加一個"popup"的類就可以完成替換。
-
為了保證JavaScript代碼在文檔加載完后才執行，可以把代碼打包添加到window的onload事件上去
window.onload = prepareLinks; function prepareLinks(){ var links = document.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ if(links[i].getAttribute("class") == "popup"){ links[i].onClick = function() { popUp(this.getAttribute("href")); return false; } } } }
對象檢測
-
可以把某個方法打包在if語句里面，通過求值結果是否為true來判定當前瀏覽器對此方法的支持（注意不需要括號），比如：
if(document.getElementById){ statements using getElementById } //或者用非邏輯 if(!document.getElementById){ return false; }
第六章
共享onload事件
我們知道需要文檔加載完后立即執行的函數可以用window對象的onload與之關聯：
window.onload = funtion
但是每次只能綁定一個，如果綁定多個，只有最后一個會被執行,下面介紹一個方法可以綁定多個函數：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
利用這個函數，可以把那些需要在頁面加載完后立即執行的函數創建為一個隊列：
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);