事件的一些簡單瞭解

事件深刻了解

1）：當點擊在一個元素時，單擊事件不單單發生在這個元素上，同時也點擊了他的父元素以及祖先元素，甚至是整個頁面。

2）：DOM分三級事件綁定

     1：dom0級事件綁定

          dom.onclick = fun( )只能監聽冒泡，不能監聽捕獲。注意ie9，chrome裏面的冒泡，一直到window對象，

          可是ie678只到document對象。且沒有window對象。

          這種事件處理程序裏面的this指的是時間源，沒有兼容性問題，DOM0級能夠將事件監聽直接寫在標籤中，但工做中不容許這樣用。

          DOM0級相同元素不能同時添加多個相同事件，會被覆蓋。

     2：DOM1級，與0級沒有區別

     3：DOM2級事件綁定

     addEventListener（）

     參數1：事件 click mouseover 不加on

     參數2：事件處理程序。

     參數3：冒泡 false  捕獲 true。DOM2級能夠同一個元素添加多個事件，不會衝突。事件處理程序裏面的this指的是事件源自己。

 ie678瀏覽器綁定事件，

     attachEvent（），只有兩個參數。

     參數一：onclick onmouseover  必須加on

     參數2：事件處理程序，function。不能監聽冒泡或者捕獲。這個事件處理程序中的this值得不是事件源，而是window。

     同一個元素添加多個事件，執行的順序是從後到前面。

     4：經典輪子（兼容性能力檢測：計算後樣式，運動框架，className，addEvent）

     兼容性處理。jquery中用的都是dom2級，自帶輪子（兼容性），jquery事件同名不會被覆蓋。

三：事件對象

event

任何事件處理函數中，瀏覽器js引擎都會默認往裏面傳遞一個實參，就是事件對象

box.onclick = function(event){console.dir(event);}

             console.log(event);

            //返回true表明這個事件是否冒泡

            console.log(event.bubbles);

            //返回被點擊的事件

            console.log(event.target);

            //事件源的id

            console.log(event.currentTarget.id);

            //被點擊事件的id

            console.log(event.target.id);

            //事件類型

            console.log(event.type);

            //被點擊事件的id

            console.log(event.srcElement.id);

            //this指代真正的事件源

            console.log(this);

event.stoppropagation();阻止冒泡，只執行到當前

event.preventDefault();阻止默認事件

event中經常使用的幾個位置屬性

屬性                                                 參照

clientX clientY                            瀏覽器左上角

x                                                左上角

layerX layerY                              當前事件源左上角

pageX pageY                             當前文檔左上角

offsetX offsetY                          當前事件源左上角

screenX screeY                          屏幕左上角

event判斷敲擊的是那個鍵盤。

event.keyCode. event.which //onkeydown,:鍵盤按下   onkeyup.鍵盤擡起  onkeypress鍵盤按下擡起

var ev = e||window.event;//爲了兼容ie678；

event在ie678裏面存在問題，這裏不是實參，是window的一個屬性，直接使用實參形式不可用window.event

event在ie678裏面沒有preventDefault( )方法，使用event.returnValue = false;來阻止默認事件。

if (event.preventDefault) {

  event.preventDefault();

  }else{

  event.returnValue = false;

}

event屬性target

獲取當前點擊的元素，可是在ie678裏面不兼容，因此在ie678裏面使用srcElement

var target = event.target ||event.srcElement;