事件的一些簡單瞭解

事件深刻了解
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;
相關文章
相關標籤/搜索