摘要：事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預定目標之前捕獲他首先接收到事件然后事件

事件流是指從頁面接受事件的順序

?

一般考慮兼容性問題,會使用冒泡而不適用捕獲

事件開始時由具體的元素(嵌套層次最深的元素)接受,然后逐級向上傳播到文檔document

?

基本跟事件冒泡相反,事件捕獲用于在于事件到達預定目標之前捕獲他,document首先接收到事件,然后事件依次向里傳遞,一直到傳播事件的實際目標,例如這個div是我們點擊的那個div

?
事件捕獲用的不多

DOM2級事件,規定的事件流包括三個階段

事件捕獲階段

處于目標階段

事件冒泡階段

?

其實每一個事件都是有這么一個階段轉換過程的

即在html中寫的事件
兩種使用方式

缺點:不方便mvc分離,代碼混亂

將一個函數賦值給一個事件處理程序屬性

主動式的事件處理

    var btn = document.getElementById("myBtn");
    //主動賦值給onclick屬性
    btn.onclick = function () {
        console.log("Clicked");
    }
    btn.onclick = null; // 刪除事件處理程序

addEventListener() 添加事件處理程序監聽

removeEventListener() 移除事件處理程序監聽

所有DOM節點中都包含這兩個方法

被動式的事件處理

可以添加多個多個事件處理程序,他們會按照添加的順序觸發

大多數情況下,都是將時間處理程序添加到事件流的冒泡階段,這樣可以最大限度的兼容各種瀏覽器.

最好只在需要在事件到達目標之前截獲他的時候將時間處理程序添加到捕獲階段

        var btn = document.getElementById("myBtn");
        //三個參數,要處理的事件名,作為事件處理程序的函數和一個布爾值
        btn.addEventListener("click",function () {
            alert(this.id);
            //true表示捕獲階段調用事件處理程序,false表示在冒泡階段調用事件處理程序
        },false)

removeEventListener只能移除添加時傳入的函數,所以匿名函數是沒辦法移除的(匿名函數沒有辦法確定是同一個)

    var btn = document.getElementById("myBtn");
    //將匿名函數改成有名函數
    var handler = function () {
        alert(this.id);
    };
    btn.addEventListener("click",handler,false);
    //可以移除
    btn.removeEventListener("click",handler,false);

在觸發DOM上的某個事件時,會產生一個事件對象event,這個對象包含著所有與事件相關的信息. 事件屬性查看

    var btn = document.getElementById("myBtn");
    //這個event就是事件對象,里面的屬性可以直接調用查看
    btn.onclick = function (event) {
        alert(event.type);//返回click
    };
    btn.addEventListener("click",function (event) {
        alert(event.type);//返回click
    },false)

如果點擊一個在body里面的myBtn元素:

    document.body.onclick = function (event) {
        console.log(event.currentTarget === document.body); //返回true
        console.log(this === document.body); //返回true
        console.log(event.target === document.getElementById("myBtn")); //返回true
    }

1.currentTarget代表事件處理程序當前正在處理的事件的那個元素,那么本例子的話就是body,另外this也是body,因為事件處理程序是注冊到body 上的
2.target是事件的目標,即點擊的那個元素,就是myBtn
3.需要注意的是即使點擊了一個元素,但是因為最終都會冒泡到body那里,所以事件處理處理會在冒泡到最外層進行處理

通過判斷事件對象的type來觸發不同的事件處理程序,用于需要通過一個函數處理多個事件時.

    var btn = document.getElementById("myBtn");
    var handler = function (event) {
        switch (event.type) {
            case "click":
                alert("Clicked");
                break;
            case "mouseover":
                event.target.style.backgroundColor = "red";
                break;
            case "mouseout":
                event.target.style.backgroundColor = "";
                break;
        }
    };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

默認行為可以使點擊a標簽的時候跳轉到另外一個頁面,或者內容超出一定大小的滾動事件

//假設myLink是一個a標簽
    var link = document.getElementById("myLink");
    link.onclick = function (event) {
        //阻止了url 默認行為跳轉
        event.preventDefault();
    };

需要注意的是只有cancelable屬性設置為true的事件,才可以使用preventDefault(),這個屬性可以在瀏覽器調試模式里面看,也可以打印出來

    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        alert("mgBtn click");
        //如果沒有屏蔽傳播的話,會出現兩次alert,因為事件會傳播到body,也會被觸發然后執行
        event.stopPropagation();
    };
    document.body.onclick = function (event) {
        alert("body click");
    }

用來確定事件當前正位于事件流的哪個階段

捕獲階段調用的事件處理程序 值為1

事件處理程序處于目標對象上 值為2

在冒泡階段調用的事件處理程序 值為3

    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        alert("btn:" + event.eventPhase); //返回2
    };
    document.body.addEventListener("click", function (event) {
        alert("body-1:" + event.eventPhase);//返回1
    }, true); // 這里是true代表在捕獲階段

    document.body.onclick = function (event) {
        alert("body-2:" + event.eventPhase);//返回3
    }

首先是返回1,因為是在捕獲階段觸發,按照流程上是先捕獲然后再到目標再到冒泡的,而捕獲階段是從最外層往里傳播的,所以是body

然后是到達了目標myBtn,所以返回2
3.再到返回3,冒泡階段,是從最里往外傳播,最里的是myBtn,最外是body,所以觸發了最后的body事件處理程序

load
當頁面完全加載后在window上面觸發(包括所有img,js,css等)

    window.addEventListener("load",function (event) {
        alert("loaded");
    })

在DOM2級事件規范,應該在document而非window上面觸發load事件,但是所有瀏覽器都在window上面實現了該事件,所以這樣用確保兼容性

也可以多帶帶對某個元素的加載進行觸發

    var img = document.getElementById("myImg");
    img.addEventListener("load",function (event) {
        //這個加載是指圖片完全加載完成,包括下載成功
        alert(event.src);
    });

    window.addEventListener("load", function (event) {
        //創建了img元素
        var img = document.createElement("img");
        //添加load事件監聽
        img.addEventListener("load", function (event) {
            alert("aa");
        });
        //輸出到dom樹
        document.body.appendChild(img);
        //設置src后,img才會開始加載
        img.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";
    })

img只有設置了src屬性才會開始下載
script文件的話,只有設置了src并且放到dom樹里面才會開始下載

確定js文件是否加載成功

    window.addEventListener("load", function (event) {
        //創建了script元素
        var script = document.createElement("script");
        //添加load事件監聽
        script.addEventListener("load", function (event) {
            alert("Loaded");
        });
        //script設置src后,并且添加到dom樹后才會開始加載
        script.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.js";
        //輸出到dom樹
        document.body.appendChild(script);
    })

unload
與load事件對應,這個事件在文檔被完全卸載后觸發,例如用戶從一個頁面切換到另外一個頁面,一般用于清楚引用,避免內存泄露

    window.addEventListener("unload", function (event) {
        alert("aaa");
    })

abort
在用戶停止下載過程時,如果嵌入的內容沒有加載完,則在對象元素上觸發

error

當發生js錯誤時在window上面觸發

當無法加載圖像時,在img觸發

如果嵌入的內容沒有加載完,則在對象元素上觸發

select
當用戶選擇文本框 input或texterea中的一個或多個字符時觸發

resize
調整瀏覽器窗口的高度或者寬度的時候觸發

scroll
當用戶滾動帶滾動條的元素中的內容時,在該元素上觸發

blur 在元素失去焦點時觸發

DOMFocusIn 用下面的

DOMFocusOut 用下面的

focus 在元素獲得焦點時觸發,這個事件不會冒泡

focusin 在元素獲得焦點時觸發,會冒泡

focusout 在元素失去焦點時觸發

即使focus和blur不冒泡,但是也可以在捕獲階段偵聽到

click 單擊

dblclick 雙擊

mousedown 用戶按下了鼠標按鈕

mouseenter 鼠標從元素外部首次移動到元素范圍之內

mouseleave 鼠標從元素范圍內移動到元素范圍外

mousemove 鼠標在元素內部移動時重復觸發

mouseout 鼠標在元素上方

mouseover 當鼠標指針位于一個元素外部,然后用戶將其首次移入另外一個元素邊界之內觸發

mouseup 用戶釋放鼠標按鈕時觸發

除了mouseenter 和mouseleave,所有鼠標事件都會冒泡

輕擊可單擊元素會觸發mousemove事件,如果此操作會導致內容變化,將不再有其他事件發生,如果屏幕沒有因此變化,那么會依次發生mousedown,mouseup和click事件

輕擊不可單擊元素不會觸發任何事件

兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel和scroll事件

mousewheel,值是event.wheelDelta,方向是用正負判斷

keydown 當用戶按下減胖上的任意鍵時觸發,而且如果按住不放的話會重復觸發

keypress 當用戶按下鍵盤的字符鍵時觸發,而且如果按住不放的話會重復觸發

keyup 當用戶釋放鍵盤上的按鍵時觸發
首先會觸發keydown,然后keypress,然后keyup

需要知道鍵碼,對應不同的按鍵

字符編碼(ASCII編碼),用戶按鍵后輸入的屏幕文本的顯示內容,用charCode屬性,用String.fromCharCode()轉換為實際的字符

只有一個文本事件,textInput,用戶按下能夠輸入實際字符的鍵時才會觸發

textInput的事件的對象里面有一個屬性inputMethod,用來分辨文本輸入到文本框的方式

0   不確定是怎么輸入
1   鍵盤輸入
2   文本粘貼
3   拖放進來的
4   IME輸入
5   通過表單中選擇某一項輸入
6   手寫輸入
7   語音輸入
8   通過幾種方式組合輸入
9   通過腳本輸入

dom變動的時候觸發

刪除節點
replaceChild的時候

插入節點
appendChild(),replaceChild()或insertBefor()的時候

DOMContentLoaded事件,相對于load事件會在頁面中的一切都加載完成后觸發,這個的話,就只會在dom樹加載完成后觸發,不理會其他img,js文件,css文件之類的
jquery的document.ready()的加載方式就是使用跟這個

pageshow和pagehide事件
在頁面顯示觸發(在load之后)和在頁面隱藏時觸發(在unload之前)

hashchange事件
url參數列表的錨點!!!變化的時候通知開發人員,錨點是#這樣的

    window.addEventListener("hashchange", function (event) {
        console.log(event); //返回一個對象
//        console.log("old url:" + event.oldURL + "new url:" + event.newURL);
    },false);

返回的對象里面有很多有用的信息,例如

newURL
:
"http://localhost:63342/test-webstorm/test5.html?_ijt=dhn30q02o026mo2upn01tav7jn#dsad"
oldURL
:
"http://localhost:63342/test-webstorm/test5.html?_ijt=dhn30q02o026mo2upn01tav7jn"

跳過

touchstart 當手指觸摸屏幕時觸發

touchmove 當手指滑動時連續觸發

touchend 當手指離開屏幕時觸發

touchcancel 當系統停止跟中觸摸時觸發
每個觸摸事件都有一些屬性

clientX,clientY(視口),screenX,screenY(屏幕),pageX,pageY(頁面) 一些坐標屬性

target 觸摸的dom節點目標

touches 表示當前跟蹤的觸摸操作的touch對象數組,每次觸摸都會生成一個對象數組,這個對象數組只有一個對象,所以用[0]調用

targetTouches 特定于事件目標的touch對象的數組

changeTouches 一個 TouchList 對象，包含了代表所有從上一次觸摸事件到此次事件過程中，狀態發生了改變的觸點的 Touch 對象,每次觸摸都會生成一個對象數組,這個對象數組只有一個對象,所以用[0]調用

    function handleTouchEvent(event) {
        //只跟蹤一次觸摸
        if (event.touches.length == 1) {
            switch (event.type) {
                case "touchstart":
                    console.log("touch stared(" + event.touches[0].clientX + "," + event.touches[0].clientY + ")");
                    break;
                case "touchend":
                    console.log("touch end(" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")");
                    break;
                case "touchmove":
                    //阻止默認滾動行為
                    event.preventDefault();
                    console.log("touch moved(" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")");
                    break;
            }
        }
    }
    window.addEventListener("touchstart", handleTouchEvent);
    window.addEventListener("touchend", handleTouchEvent);
    window.addEventListener("touchmove", handleTouchEvent);

解決事件處理程序過多的問題

    
test1
    
test2

通過添加一次事件可以綁定所有的li,利用冒泡的特性

    var list = document.getElementById("myLinks");
    list.addEventListener("click",function (event) {
        //event事件對象有target屬性,里面還有id
        //根據里面的不同的id來觸發不同的事件處理邏輯
        //每一個li都能夠冒泡到上層的ul,所以可以得到被處理
        switch (event.target.id){
            case "test1":
                console.log("test111111");
                break;
            case "test2":
                console.log("test22222");
                break;
        }
    });

空事件處理程序過多也會導致性能不好
例如手動設置null

btn.onclick = null;

但是沒說有對于addEventListener那種處理.

模擬事件在測試web應用程序時候是一種極其有用的技術