概念

當某個對象觸發了某種事件時，所發生的一切詳細信息保存在一個臨時的地方，這個地方叫做事件對象（黑匣子）

獲取事件對象

要考慮兼容
標準瀏覽器：通過事件觸發函數的第一個形參獲得
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>