JavaScript DOM 編程藝術筆記(4章-6章)

第四章

事件處理函數

  • 在特定事件發(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]
node關系圖

第五章

平穩(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);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末舶替,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子杠园,更是在濱河造成了極大的恐慌顾瞪,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抛蚁,死亡現場離奇詭異陈醒,居然都是意外死亡,警方通過查閱死者的電腦和手機篮绿,發(fā)現死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門孵延,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人亲配,你說我怎么就攤上這事尘应。” “怎么了吼虎?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵犬钢,是天一觀的道長。 經常有香客問我思灰,道長玷犹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任洒疚,我火速辦了婚禮歹颓,結果婚禮上,老公的妹妹穿的比我還像新娘油湖。我一直安慰自己巍扛,他們只是感情好,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布乏德。 她就那樣靜靜地躺著撤奸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喊括。 梳的紋絲不亂的頭發(fā)上胧瓜,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天,我揣著相機與錄音郑什,去河邊找鬼府喳。 笑死,一個胖子當著我的面吹牛蘑拯,可吹牛的內容都是我干的劫拢。 我是一名探鬼主播肉津,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼舱沧!你這毒婦竟也來了?” 一聲冷哼從身側響起偶洋,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤熟吏,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后玄窝,有當地人在樹林里發(fā)現了一具尸體牵寺,經...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年恩脂,在試婚紗的時候發(fā)現自己被綠了帽氓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡俩块,死狀恐怖黎休,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情玉凯,我是刑警寧澤势腮,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站漫仆,受9級特大地震影響捎拯,放射性物質發(fā)生泄漏。R本人自食惡果不足惜盲厌,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一署照、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吗浩,春花似錦建芙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至微王,卻和暖如春屡限,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背炕倘。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工钧大, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人罩旋。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓啊央,卻偏偏與公主長得像眶诈,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓜饥,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內容