第四章
事件處理函數
-
在特定事件發(fā)生時調用特定的JavaScript代碼
event = "JavaScript statement(s)"
有很多種事件處理函數:
onload, onunload, onchange, onmouseover, onmouseout, onmousedown, onmouseup, onclick
事件翰守,具體參見HTML DOM 事件
-
JavaScript代碼包含在一對引號直接偎血,這對引號之間可以放置多個JavaScript語句梢为,用“;”隔開就行
onclick = "showPic(this)"http://this表示當前對象
-
在事件處理函數被觸發(fā)之后机错,引號之間的JavaScript語句被執(zhí)行,被調用的語句可以給這個事件處理函數返回一個值瘪松。返回true代表這個事件被觸發(fā)了偿曙,false代表沒有觸發(fā)浙值,利用這點,可以攔截一些默認事件,比如下面這個鏈接悍抑,點擊之后由于返回的是
false
,瀏覽器認為這個事件沒有被觸發(fā)鳄炉,所以不會發(fā)生跳轉<a herf="http://www.example.com" onclik="return false;">Click me</a>
一些常用屬性
- childNodes屬性:用于獲取任何一個元素的所有子元素,是一個包含這個元素所有子元素的數組(子元素除了元素節(jié)點還包括很多其他節(jié)點)
- nodeType屬性:獲取一個節(jié)點的節(jié)點類型搜骡,節(jié)點類型是通過數字表示
- 1代表元素節(jié)點
- 2代表屬性節(jié)點
- 3代表文本節(jié)點
- nodeValue屬性:用于獲得一個節(jié)點的值,一般元素節(jié)點的值是null拂盯,文本節(jié)點的值是它里面的文本內容
- firstChild屬性:獲得一個節(jié)點的第一個子節(jié)點,等同于childNodes[0]
- lastChild屬性浆兰,獲得一個節(jié)點的最后一個子節(jié)點磕仅,等同于node.childNodes[node.childNodes.length-1]
第五章
平穩(wěn)退化
定義:讓訪問者的瀏覽器不支持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代碼在文檔加載完后才執(zhí)行,可以把代碼打包添加到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事件
我們知道需要文檔加載完后立即執(zhí)行的函數可以用window對象的onload與之關聯:
window.onload = funtion
但是每次只能綁定一個坏平,如果綁定多個,只有最后一個會被執(zhí)行,下面介紹一個方法可以綁定多個函數:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
利用這個函數锦亦,可以把那些需要在頁面加載完后立即執(zhí)行的函數創(chuàng)建為一個隊列:
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);