jacascript 事件對象event

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

　　在觸發DOM上的某個事件時，會產生一個事件對象 event，這個對象中包含着全部與事件有關的信息。全部瀏覽器都支持 event 對象，但有兼容性問題。

獲取事件對象

　　通常地，event 對象是事件程序的第一個參數。IE8及如下瀏覽器不支持；

　　另外一種方法是直接使用 event 變量，firefox 瀏覽器不支持；

　　獲取事件對象的常見兼容寫法：

        <div id="box" style="height:200px;width:200px;background:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(ev){
                ev = ev || event;//獲取事件對象的常見兼容寫法
                box.innerHTML = ev;
            }
        </script>

 

事件類型

　　事件有不少類型，事件對象中的 type 屬性表示被觸發的事件類型；

        <div id="box" style="height:200px;width:200px;background:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(ev){
                ev = ev || event;//獲取事件對象的常見兼容寫法
                box.innerHTML = ev.type;//事件對象中的type屬性表示被觸發的事件類型
            }
        </script>

 

事件目標

　　關於事件目標，共有 currentTarget、target 和 srcElement 這三個屬性；

　　currentTarget 屬性返回事件當前所在的節點，即正在執行的監聽函數所綁定的那個節點；IE8及如下瀏覽器不支持 ;

　　currentTarget 與事件中的 this 指向相同；

　　target 屬性返回事件的實際目標節點；IE8及如下瀏覽器不支持；

　　srcElement 屬性與 target 屬性功能一致，返回事件的實際目標節點；firefox 瀏覽器不支持；

        <style type="text/css">
            #box{height:200px;width:200px;background-color:pink;}
            #child{height: 100px;width: 100px;background-color: green;}
        </style>
        <div id="box">
            <div id="child"></div>
        </div>
        <script>
            var oBox = document.getElementById('box');
            var oChild = document.getElementById('child');
            oBox.onclick = function(ev){
                ev = ev || event;
                //currentTarget屬性返回事件當前所在的節點，即正在執行的監聽函數所綁定的那個節點
                console.log(ev.currentTarget);//<div id="box">...</div>
                
                //currentTarget與事件中的this指向相同
                console.log(ev.currentTarget === this);//true
                
                //target屬性返回事件的實際目標節點，IE8及如下瀏覽器不支持
                //srcElement 屬性與 target 屬性功能一致，返回事件的實際目標節點；firefox 瀏覽器不支持；
                //兼容性寫法：
                var target = ev.target || ev.srcElement;
                console.log(target);//<div id="child"></div>
            }
        </script>

 

事件代理

　　因爲事件會在冒泡階段向上傳播到父節點，所以能夠把子節點的監聽函數定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫作事件的代理(delegation)，也叫事件委託；

　　事件代理應用事件目標的 target 和 srcElement 屬性完成。利用事件代理，能夠提升性能及下降代碼複雜度；

        <style>
            #box{background-color: pink;}
            .in{height: 30px;}
        </style>
        <ul id="box">
            <li class="in">1</li>
            <li class="in">2</li>
            <li class="in">3</li>
            <li class="in">4</li>
            <li class="in">5</li>
        </ul>
        <script>
            var oBox = document.getElementById('box');
            oBox.onmouseover = function(ev){
                ev = ev || event;
                var target = ev.target || ev.srcElement;
                target.style.backgroundColor = 'lightblue';
            }
            oBox.onmouseout = function(ev){
                ev = ev || event;
                var target = ev.target || ev.srcElement;
                target.style.backgroundColor = 'pink';
            }
        </script>

 

事件冒泡

　　事件冒泡是事件流的第三個階段，經過事件冒泡能夠在這個階段對事件作出響應；

　　關於冒泡，事件對象中包含 bubbles、cancelBubble、stopPropagation() 和 stopImmediatePropagation() 這四個相關的屬性和方法；

　　bubbles 屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性爲只讀屬性。發生在文檔元素上的大部分事件都會冒泡，但 focus、blur 和 scroll 事件不會冒泡。因此，除了這三個事件 bubbles 屬性返回 false 外，其餘事件該屬性都爲true；

　　stopPropagation() 方法表示取消事件的進一步捕獲或冒泡，但沒法阻止同一事件的其餘監聽函數被調用，無返回值。IE8及如下瀏覽器不支持；

　　stopImmediatePropagation() 方法不只能夠取消事件的進一步捕獲或冒泡，並且能夠阻止同一個事件的其餘監聽函數被調用，無返回值。IE8及如下瀏覽器不支持；

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(ev){
                ev = ev || event;
                //bubbles 屬性返回一個布爾值，表示當前事件是否會冒泡
                console.log(ev.bubbles);//true
            }
            oBox.addEventListener('click',function(ev){
                ev = ev || event;
                //stopPropagation() 方法表示取消事件的進一步捕獲或冒泡，
                ev.stopPropagation();
                oBox.innerHTML +='stopPropagation() 方法表示取消事件的進一步捕獲或冒泡<br/>';    
            })
            
            //stopPropagation() 方法表示取消事件的進一步捕獲或冒泡，但沒法阻止同一事件的其餘監聽函數被調用
            oBox.addEventListener('click',function(ev){
                ev = ev || event;
                oBox.innerHTML += '但沒法阻止同一事件的其餘監聽函數被調用';    
            })
            
            document.body.onclick = function(ev){
                oBox.innerHTML += '冒泡已被阻止';
            }
        </script>

　　cancelBubble 屬性只能用於阻止冒泡，沒法阻止捕獲階段。該值可讀寫，默認值是false。當設置爲 true 時，cancelBubble 能夠取消事件冒泡；該屬性全瀏覽器支持，但並非標準寫法；

        <script type="text/javascript">
            var handler = function(ev){
                ev = ev || event;
                if(ev.stopPropagation){
                    ev.stopPropagation();
                }else{
                    ev.cancelBubble = true;
                }
            }
        </script>

 

事件流

　　eventPhase 屬性返回一個整數值，表示事件目前所處的事件流階段，IE8及如下瀏覽器不支持；

　　0表示事件沒有發生，1表示捕獲階段，2表示目標階段，3表示冒泡階段；

取消默認行爲

　　關於取消默認行爲的屬性包括 cancelable、defaultPrevented、preventDefault() 和 returnValue ;

　　cancelable 屬性返回一個布爾值，表示事件是否能夠取消。該屬性爲只讀屬性。返回true時，表示能夠取消。不然，表示不可取消；IE8及如下瀏覽器不支持；

　　defaultPrevented 屬性表示默認行爲是否被阻止，返回 true 時表示被阻止，返回 false 時，表示未被阻止；IE8及如下瀏覽器不支持；

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(ev){
                ev = ev || event;
                //cancelable 屬性返回一個布爾值，表示事件是否能夠取消
                console.log(ev.cancelable );//true
                //defaultPrevented 屬性表示默認行爲是否被阻止
                console.log(ev.defaultPrevented );//false
            }
        </script>

 

　　preventDefault() 方法取消瀏覽器對當前事件的默認行爲，無返回值；IE8及如下瀏覽器不支持；

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(ev){
                ev = ev || event;
                //cancelable 屬性返回一個布爾值，表示事件是否能夠取消
                console.log(ev.cancelable );//true
                //defaultPrevented 屬性表示默認行爲是否被阻止
                console.log(ev.defaultPrevented );//false
                
                //preventDefault() 方法取消瀏覽器對當前事件的默認行爲
                ev.preventDefault();
                //defaultPrevented 屬性表示默認行爲是否被阻止
                console.log(ev.defaultPrevented );//true
            }
        </script>

 

　　returnValue 屬性可讀寫，默認值是true，但將其設置爲 false 就能夠取消事件的默認行爲，與 preventDefault() 方法的做用相同；firefox 和 IE9及以上瀏覽器不支持；

　　兼容性寫法：

        <script type="text/javascript">
            var handler = function(e){
                ev = ev || event;
                if(ev.preventDefault){
                    ev.preventDefault();
                }else{
                    ev.returnValue = false;
                }
            }
        </script>