第四章

事件處理函數(shù)

• 在特定事件發(fā)生時調(diào)用特定的JavaScript代碼

    event = "JavaScript statement(s)"
  

• 有很多種事件處理函數(shù): onload, onunload, onchange, onmouseover, onmouseout, onmousedown, onmouseup, onclick 事件，具體參見HTML DOM 事件

• JavaScript代碼包含在一對引號直接，這對引號之間可以放置多個JavaScript語句，用“;”隔開就行

    onclick = "showPic(this)"http://this表示當(dāng)前對象
  

• 在事件處理函數(shù)被觸發(fā)之后，引號之間的JavaScript語句被執(zhí)行，被調(diào)用的語句可以給這個事件處理函數(shù)返回一個值。返回true代表這個事件被觸發(fā)了，false代表沒有觸發(fā)，利用這點(diǎn)，可以攔截一些默認(rèn)事件,比如下面這個鏈接，點(diǎn)擊之后由于返回的是false,瀏覽器認(rèn)為這個事件沒有被觸發(fā)，所以不會發(fā)生跳轉(zhuǎn)

  <a herf="http://www.example.com" onclik="return false;">Click me</a>
  

一些常用屬性

• childNodes屬性：用于獲取任何一個元素的所有子元素，是一個包含這個元素所有子元素的數(shù)組（子元素除了元素節(jié)點(diǎn)還包括很多其他節(jié)點(diǎn)）
• nodeType屬性：獲取一個節(jié)點(diǎn)的節(jié)點(diǎn)類型，節(jié)點(diǎn)類型是通過數(shù)字表示
  • 1代表元素節(jié)點(diǎn)
  • 2代表屬性節(jié)點(diǎn)
  • 3代表文本節(jié)點(diǎn)
• nodeValue屬性：用于獲得一個節(jié)點(diǎn)的值,一般元素節(jié)點(diǎn)的值是null，文本節(jié)點(diǎn)的值是它里面的文本內(nèi)容
• firstChild屬性：獲得一個節(jié)點(diǎn)的第一個子節(jié)點(diǎn)，等同于childNodes[0]
• lastChild屬性，獲得一個節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)，等同于node.childNodes[node.childNodes.length-1]

node關(guān)系圖

第五章

平穩(wěn)退化

• 定義：讓訪問者的瀏覽器不支持JavaScript的情況下仍然可以正常訪問你的網(wǎng)站。

• 例子：

    <a herf="http://www.example.com" onclik=this.href;return false;">Click me</a>
  

  即使JavaScript被禁用，上面的代碼任然可以正常跳轉(zhuǎn)

• 盡量不要使用 JavaScript 偽協(xié)議，比如:

    <a herf="javascript:showPic('xxxx')";return false;">Click me</a>
  

  以上代碼在JavaScript失效后無法正確顯示

漸進(jìn)增強(qiáng)

• 定義：用一些額外信息去包裹原始數(shù)據(jù)，增強(qiáng)數(shù)據(jù)的效果，但不影響數(shù)據(jù)內(nèi)容本身，比如 CSS 之于 HTML。

分離行為與內(nèi)容

• 可以在外部JavaScript文件里面把事件添加到 HTML 文檔中的某個元素上，而不用在 html 里面嵌入類似“onclick=xxx”之類的 JavaScript 代碼。簡單地說就是：HTML里面最好不要出現(xiàn) JavaScript 代碼！

• 方式：

    element.event = action
  

• 例子：為所有 "a" 標(biāo)簽添加popUp()函數(shù)調(diào)用：

  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標(biāo)簽添加一個"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語句里面，通過求值結(jié)果是否為true來判定當(dāng)前瀏覽器對此方法的支持（注意不需要括號），比如：

    if(document.getElementById){
        statements using getElementById
    }
    
    //或者用非邏輯
    
    if(!document.getElementById){
        return false;
    }
  

第六章

共享onload事件

我們知道需要文檔加載完后立即執(zhí)行的函數(shù)可以用window對象的onload與之關(guān)聯(lián)：

window.onload = funtion

但是每次只能綁定一個，如果綁定多個，只有最后一個會被執(zhí)行,下面介紹一個方法可以綁定多個函數(shù)：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

利用這個函數(shù)，可以把那些需要在頁面加載完后立即執(zhí)行的函數(shù)創(chuàng)建為一個隊(duì)列：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);