JavaScript 事件類型

一、JavaScript 文檔事件（上）

    文檔事件

        基本描述：和滑鼠事件這種需要使用者主動做出某些操作以此來觸發的事件不同之處在于，文檔事件中大部分并不需要使用者主動觸發，而是會在文檔加載至不同狀态時自動調用。

        基本内容：

            （1）文檔徹底加載成功/失敗時，自動觸發事件：load/error；

                文法：node.onload / onerror = function(){};

                說明：文檔事件dom0或dom2都可以，并沒有限制必須使用dom0進行綁定。

            （2）文檔DOM tree加載完成時，自動觸發事件：DOMContentLoaded；

                文法：document.addEventListener("DOMContentListener", function(){ });

                說明：DOM tree加載完成并不等于頁面加載完成，必須注意！！！

            （3）文檔加載狀态發生改變時，自動觸發事件：readystatechange

                文法：document.onreadystatechange = function () {};

                說明：本事件發生時document節點的readyState屬性會跟随發生變化。

    文檔加載順序

        （1）解析HTML結構    // 此時狀态為：頁面加載 | readyState狀态為loading | 浏覽器在試圖将代碼變成頁面 。

        （2）加載外部腳本和樣式表檔案    // 此時狀态為：将link與script引入的外部的腳本與css檔案，加載到文檔中來。

        （3）解析并執行腳本代碼    // 此時的狀态為：将加載進來的腳本檔案執行。

        （4）DOM樹建構完成    // 此時的狀态為：DOM Tree 建構完畢，文檔事件（DOMContentLoaded）發生回調。

        （5）加載圖檔等外部檔案    // 此時的狀态為：DOM Tree 建構完畢後，開始加載外部圖檔，連結，flash等外部檔案。

        （6）頁面加載完畢    // 此時的狀态為：頁面徹底加載完畢，文檔事件（load）發生回調。

        檔案阻塞：因為script腳本的執行是在css樣式檔案後面執行的，是以如果存在一個過大的css檔案正在加載，在這個css檔案後面又恰好有一個待執行的script腳本，那麼這個script腳本在css檔案加載完畢之前都不會執行，這種現象就被稱為檔案阻塞。

    文檔加載順序——測試代碼：

// 這句指令在執行的時候，頁面的加載狀态一定是loading
    console.log(document.readyState);
// 當頁面的readyState狀态發生改變的時候，readystatechange事件自動觸發
    document.onreadystatechange = function () {console.log(document.readyState);};
// dom tree 加載完畢時，DOMContentLoaded事件自動觸發
    document.addEventListener("DOMContentLoaded", function () {console.log("DOM Tree已經加載完成");});
// 頁面徹底加載完成——load事件，window.onload是固定寫法
    window.onload = function () {consolel.log("整個頁面徹底加載完成");};
// 外部資源——load事件，圖檔加載完畢後觸發
    document.querySelector("img").onload = function () {console.log("外部資源————圖檔加載完畢");};

           

二、JavaScript 文檔事件（下）

    焦點事件focus / blur

        名詞解釋：焦點，是指js目前正在和使用者發生互動的節點，可以類比為人類目光彙聚的地方。

        基本描述：當節點成為焦點、或當節點取消成為焦點時自動觸發的事件，稱為焦點事件。

        事件類型：獲得焦點事件focus、失去焦點事件blur

        綁定方法：焦點事件監聽既可以通過dom0添加，也可以通過dom2添加。

        文法結構：

            node.onfocus / onblur  = function () {};

            node.addEventListener("focus / blur", 外部函數名);

        注意事項：

            （1）焦點事件監聽不支援冒泡機制傳遞，如果必須傳遞則需要通過捕獲機制傳遞。

            （2）焦點事件監聽一般會添加能夠獲得焦點的元素，例如文本框等。

            （3）焦點事件可以通過直接調用【事件名函數】，來主動觸發事件。

                例如：userNameInput.focus();    // 令輸入框主動擷取焦點

                          userNameInput.blur();    // 令輸入框主動失去焦點

    滾動事件scroll

        基本描述：當文檔或元素發生滾動時，自動觸發的事件稱為滾動事件

        綁定方式：滾動事件監聽既可以通過dom0添加，也可以通過dom2添加

        文法結構：

            document.onscroll = function () {};    // 文檔滾動事件

            node.onscroll = function () {};    // 元素滾動事件

        注意事項：

            （1）文檔滾動事件中，可以通過scrollTop / scrollLeft兩個屬性來擷取頁面的滾動距離。說明：

                a，擷取到的滾動距離是沒有機關的純數字

                b，擷取時存在相容性寫法：

                    var finalDistance = document.documentElement.scrollTop || document.body.scrollTop

                c，滾動距離不僅可讀，還可寫。意味着可以通過指定具體值來控制頁面的滾動。

            （2）元素滾動事件中，也通過scrollTop / scrollLeft兩個屬性來擷取元素的滾動距離。說明：

                a，擷取到的滾動距離時沒有機關的純數字

                b，元素滾動事件并不存在相容性問題，直接.scrollTop / scrollLeft擷取滾動距離即可。

                c，滾動距離不僅可讀，還可寫。意味着可以通過指定具體值來控制元素的滾動。

                d，元素本身并不像頁面一樣通過設定高度即可擷取滾動條，是以元素如果想要觸發滾動事件，那麼元素就必須通過overflow屬性來設定具有滾動條才行。

三、JavaScript 鍵盤事件

    鍵盤事件

        基本描述：當使用者操作鍵盤時觸發的事件監聽稱為鍵盤事件監聽

        綁定方式：鍵盤事件監聽既可以通過dom0添加，也可以通過dom2添加

        事件類型：鍵盤按下事件keydown、鍵盤按下事件keypress、鍵盤擡起事件keyup

        注意事項：

            （1）keydown事件會在使用者按下任意按鍵時觸發，如果按住不放則連續觸發。keypress事件會在使用者按下【除功能鍵以外的】按鍵時被觸發，如果按住不放則連續觸發。

            （2）在鍵盤事件内部可以通過event.keyCode代碼來擷取按下按鍵的Unicode編碼值，但時keydown無法識别大小寫，keypress可以。

            （3）鍵盤事件監聽預設采用冒泡機制傳遞，是以可以将事件監聽添加在特定的元素上，也可以添加在document之上。

            （4）對于常見的鍵盤按鍵編碼，需要特别記憶。

四、JavaScript 觸摸事件

    觸摸事件

        基本描述：當使用者手指操作移動端時觸發的事件監聽稱為觸摸事件監聽

        綁定方式：觸發事件監聽必須通過dom2添加，dom0和html方式都無效。

        事件類型：開始觸摸touchstart、觸摸移動touchmove、觸摸結束touchend、觸摸中斷touchcancel

        注意事項：

            （1）所有觸摸事件監聽均為預設采用冒泡機制傳遞

            （2）滑鼠事件中通過event.clientX / event.clientY 來擷取滑鼠坐标的操作，在觸摸事件中無效。而是通過event.touch[n].pageX / pageY 來擷取手指觸摸點的坐标，n代表螢幕上的第幾根手指。

            （3）可以為一個元素添加多個觸摸事件監聽，多個觸摸監聽之間互不影響。