概念
當某個對象觸發了某種事件時，所發生的一切詳細信息保存在一個臨時的地方，這個地方叫做事件對象（黑匣子）
獲取事件對象
要考慮兼容
標準瀏覽器：通過事件觸發函數的第一個形參獲得
arguments：偽數組，接收函數調用時所傳遞的所有實參
IE9以下：通過內置的全局對象window.event獲得
兼容：
oDiv.onclick = function(event){
var e = event || window.event;
};
使用事件對象
獲取鼠標按鍵的編碼
event.button
oDiv.onmousedown = function(event){
//var e = event || window.event;
//console.log(e.button);
console.log(getButton(event));
};
//兼容
function getButton(event){
var e = event || window.event;
if(e){
return e.button;
} else if(window.event) {
switch(e.button){// IE左中右鍵值為 1 4 2
case 1:return 0;
case 4:return 1;
case 2:return 2;
}
}
}
獲取鼠標坐標值
可視區坐標值
event.clientX, event.clientY
相對坐標值
event.offsetX, event.offsetY
絕對坐標值(頁面坐標值)
event.pageX, event.pageY
屏幕坐標值
event.screenX, event.screenY
獲取鍵盤的編碼
onkeydown/onkeyup //監聽整個鍵盤
event.keyCode //字母的大寫的值
onkeypress
event.keyCode //火狐返回0，google和IE可區分字母大小寫
event.charCode, event.which//火狐,google可區分大小寫,IE不識別
兼容
oDiv.onkeypress = function(event){
var e = event || window.event;
var keyValue = e.keyCode || e.charCode || e.which;
return keyValue;
}
組合鍵(表示按住這些鍵的同時)
event.ctrlKey, event.shiftKey, event.altKey
demo:
document.onclick = function(event){
event = event || window.event;
if(event.ctrlKey){
alert("hello");//按住 ctrl 的時候點擊鼠標
}
};
document.onkeydown = function(event){
event = event || window.event;
var key = event.keyCode || event.charCode || event.which;
if(event.shiftKey && event.key == 13){
alert("你同時按下了shift 和 enter（回車）");
}
};
事件流(系統默認采用事件冒泡)
事件捕獲(IE，opera不支持)
由祖先節點依次向他的子節點依次傳遞事件的過程
事件冒泡
由子節點一次向他的祖先節點傳遞事件的過程，成為事件冒泡，如果那個祖先節點有事件觸發函數，則執行該函數。具體表現為，我在一個子元素上添加了一個點擊事件，他的所有父級元素上也都添加了點擊事件，當我點擊這個子元素的時候，程序會依次從子元素逐級向上調用點擊事件。下面的 demo 里會依次彈出：btn , box , body
阻止事件冒泡
e.stopPropagation();//只有標準能用
e.cancelBubble = true;//都能用
demo:
<div id="box">
<input id="btn" type="button" >
</div>
<script type="text/javascript">
/*
事件冒泡
清除事件冒泡：
e.stopPropagation();IE不能用
e.cancelBubble();都能用，但還是要做兼容(滑稽~)
e.cancelBubble?e.cancelBubble = true : e.stopPropagation();
*/
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(event){
var e = event || window.event;
//e.cancelBubble = true;
//e.stopPropagation();
e.cancelBubble?e.cancelBubble = true : e.stopPropagation();
alert("btn");
};
box.onclick = function(){
alert("box");
};
document.body.onclick = function(){
alert("body");
};
</script>
