好好學一遍JavaScript 筆記(九)——事件處理函數/監聽函數/事件對象

事件處理器是與特定的文本和特定的事件相聯繫的JavaScript腳本代碼，當該文本發生 改變或者事件被觸發時，瀏覽器執行該代碼並進行相應的處理操做，而響應某個事件而進行的處理過程稱爲事件處理。HTML文檔事件包括用戶載入目標頁面直到 該頁面被關閉期間瀏覽器的動做及該頁面對用戶操做的響應，主要分爲瀏覽器事件和HTML元素事件兩大類。在瞭解這兩類事件以前，先來了解事件捆綁的概念。 HTML文檔將元素的經常使用事件（如 件的事件處理器就被執行，並將處理結果返回給瀏覽器。事件捆綁致使特定的代碼放置在其所處對象的事件處理器中。若是在javaScript中分配事件處理 函數、則須要首先得到要處理的對象的引用、而後將函數賦值給對應的事件處理函數屬性、示例：

<div id="divId">點擊</div>
    <!-- 注意JS代碼要放在div元素以後、若是先執行JS在執行div元素的話、
         document是獲取不到對象的、要時刻記住、解釋執行的的特性
                        另一點就是事件處理函數名稱必須小寫才能正確響應事件。 -->
    <script type="text/javascript">
            var oDiv = document.getElementById("divId");
            oDiv.onclick = function (){
                alert("javaScript事件處理函數!");
            };
    </script>
    <div onClick="alert('HTML中分配事件處理函數!');">點擊</div>

事件對象
建立包含關於剛剛發生的事件的信息的事件對象、包含的信息以下：
        一、引發事件的對象；
        二、事件發生時鼠標的信息；
        三、事件發生時鍵盤的信息。

事件對象只在發生事件時才被建立、且只有事件處理函數才能訪問。全部事件處理函數執行完畢後、事件對象就被銷燬。

定位：
        在IE中、事件對象是Window對象的一個屬性event。事件處理函數必須這樣訪問事件對象：

oDiv.onclick = function () {
           var oEvent = window.event;
       }

在DOM兼容的瀏覽器(如Mozilla、Safari和Opera)中訪問事件對象、要這麼作：

oDiv.onlcik =function (){
            var oEvent = arguments[0];
        }

也能夠直接命名參數、訪問就更方便：

oDiv.onclick = function (oEvent) {}

 

屬性方法：

下面是IE中的屬性以及方法

DOM事件對象屬性核心方法

類似性：
一、獲取事件類型
這樣可在任何一種瀏覽器中獲取事件的類型：

<div id="divId">
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------------------------
    </div>
    <div>
        <input type="text" id="testId" onkeydown="keyFunction();" onkeyup="keyFunction();"/>
    </div>
    <script type="text/javascript">
        var oDiv = document.getElementById("divId");
        function eFunction(oEvent){
            /**oEvent.type在IE會報錯、說type爲空或不是對象、火狐木有問題**/
            if(oEvent.type == "click"){
                alert("click");
            }else if(oEvent.type == "mouseover"){
                alert("mouseover");
            }
        }
        function ieFunction(){
            /**IE須要這樣獲取event對象**/
            var oEvent = window.event;
            if(oEvent.type == "click"){
                alert("click");
            }else if(oEvent.type == "mouseover"){
                alert("mouseover");
            }


            /**
             * 獲取客戶端座標
             */
             alert("獲取客戶端座標X: "+oEvent.clientX+"   Y: "+oEvent.clientY);


            /**
             * 獲取屏幕座標
             */
             alert("獲取屏幕座標X: "+oEvent.screenX+"   Y: "+oEvent.screenY);
        }
        //oDiv.onclick = eFunction;
        //oDiv.onmouseover = eFunction;
        oDiv.onclick = ieFunction;
        oDiv.onmouseover = ieFunction;


        /**獲取按鍵的數值代碼**/
        function keyFunction(){
            /**
             * onkeyup 是在用戶放開任何先前按下的鍵盤鍵時發生。
             * onkeydown 是在用戶按下任何鍵盤鍵時發生。
             */
            var oEvent = window.event;
            var keyValue = oEvent.keyCode;
            //alert(keyValue);

            /**檢測shift、alt鍵是否被按下返回的是boolean值**/
            var bshift = oEvent.shiftKey;
            var balt = oEvent.altKey;
            alert("shift: "+bshift+" alt:"+balt);
        }
    </script>