JavaScript系列之事件詳解

JavaScript簡單入門能夠看看我醜醜的Github博客JavaScript簡單入門

事件

JavaScript與HTML之間的交互是經過事件實現的。事件是文檔或者瀏覽器窗口中發生的，特定的交互瞬間。

事件流

事件流描述的是從頁面中接收事件的順序。
事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件捕獲

事件開始時是由較爲不具體的節點接收，而後逐級向下傳播到最具體的節點 。

事件冒泡

事件開始時是由最具體的節點接收，而後逐級向上傳播到較爲不具體的節點。

DOM事件流

「DOM2級事件」規定事件流包括三個階段：

事件捕獲階段 -->  處於目標階段 -->  事件冒泡階段

● 事件捕獲：事件發生時（onclick,onmouseover……）首先發生在document上，而後依次傳遞給body，最後到達目的節點（即事件目標）
● 事件冒泡：事件到達事件目標以後不會結束，會逐層向上冒泡，直至document對象，跟事件捕獲相反

例如單擊頁面div

事件處理程序

事件是用戶或瀏覽器自身執行的某種動做，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（或事件偵聽器）。事件處理程序的名字以"on"開頭。
爲事件指定事件處理程序的方法主要有3種。

html事件處理程序

事件直接加在DOM元素上。

//原生函數
<input type="button" value="click me!" onclick="alert('clicked!')" />
//自定義函數
<input  onclick="myAlert()"  type="button" value="click me!" />
<script type="text/javascript">
    function myAlert(){
        alert("謝謝支持");
    }
</script>

DOM0級事件處理程序

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

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>

DOM2級事件處理程序

DOM2級事件處理程序能夠爲一個元素添加多個事件處理程序。其定義了兩個方法用於添加和刪除事件處理程序：addEventListener()和removeEventListener()。
優勢:

1. 能夠綁定多個事件。
2. 能夠解除相應的綁定

• addEventListener

elementObject.addEventListener(eventName,handle,useCapture); IE8及如下不支持，屬於DOM2級的方法，可添加多個方法不被覆蓋

• removeEventListener

經過addEventListener添加的事件處理程序必須經過removeEventListener刪除，且參數一致。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>

IE特有

• attachEvent
  elemObject.attachEvent("eventName", functionReference); IE特有，兼容IE8及如下，可添加多個事件處理程序，只支持冒泡階段

useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認false。

• detachEvent

經過attachEvent添加的事件處理程序必須經過detachEvent方法刪除，且參數一致。

兼容寫法示例

function addEvent(obj,type,handle){
    try{  
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  
        // IE8.0及其如下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  
        // 早期瀏覽器
            obj['on' + type] = handle;
        }
    }
}

取消事件

• 給對象的事件屬性賦值爲null，可取消此事件的全部註冊過的處理事件程序。

document.body.onclick=null;     //onclick屬性賦值爲null，至關於註銷了onclick事件

• 阻止經過on這種方式綁定的事件的默認事件

ele.onclick = function() {
    return false;              //經過返回false值阻止默認事件行爲
};

阻止事件

阻止事件冒泡

標準事件對象是e.stopPropagation()，IE則使用e.cancelBubble = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.stopPropagation();   
});
//IE
btn.attachEvent("onclick", function(event) {
    event.cancelBubble = true;  
});

阻止默認事件

標準事件對象使用preventDefault()，IE則使用returnValue = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.preventDefault(); 
});
//IE
btn.attachEvent("onclick", function(event) {
    event.returnValue = false;
});

事件對象

事件在瀏覽器中是以對象的形式存在的，即event。觸發一個事件，就會產生一個事件對象event，該對象包含着全部與事件有關的信息。
部分屬性以下：

1. type屬性，被觸發的事件的類型
2. target屬性，直接事件目標，真正觸發事件的目標
3. currentTarget屬性，其事件處理程序當前正在處理事件的那個元素

在事件處理程序內部，對象this始終等於currentTarget的值，而target則是包含事件的實際目標。

DOM中的事件對象

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log(event); 
    }
    btn.addEventListener("click", function (event) {
        console.log(event); 
    },false);

IE中的事件對象

• 經過DOM0級方法添加事件處理程序時，event對象做爲window對象的一個屬性存在

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {
        var event=window.event;
       console.log(event); 
    }
</script>

• 經過attachEvent()添加的事件處理程序，event對象做爲參數傳入

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (event) {
        console.log(event);
    })
</script>

部分屬性以下：

1. srcElement屬性，事件的目標（與DOM中的target屬性相同）

兼容性處理

function showMsg(event){
    event = event || window.event;  
    var ele = event.target || event.srcElement; 
    ......
 }

事件處理程序中this

IE事件處理程序中this的值等於 window 對象，而在標準事件綁定當中，this的值等於被綁定的元素。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
});
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
});

事件委託

利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果，解決事件處理程序過多問題。
事件委託優勢：

1. 提升JavaScript性能。事件委託能夠顯著的提升事件的處理速度，減小內存的佔用
2. 動態的添加DOM元素，不須要由於元素的改動而修改事件綁定。

<ul id="color">
    <li>red</li>
    <li>orange</li>
    <li>yellow</li>
    <li>green</li>
</ul>
<script>
    (function(){
        var color = document.getElementById("color");
        color.addEventListener('click', showColor, false);
        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target||e.srcElement;
            if (targetElement.nodeName.toLowerCase()==="li") {
                alert(targetElement.innerHTML);
            }
        }
    })();
</script>