JS事件对象

概念

当某个对象触发了某种事件时，所发生的一切详细信息保存在一个临时的地方，这个地方叫做事件对象（黑匣子）

获取事件对象

要考虑兼容
标准浏览器：通过事件触发函数的第一个形参获得
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>