事件深刻了解
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;