概念
当某个对象触发了某种事件时，所发生的一切详细信息保存在一个临时的地方，这个地方叫做事件对象（黑匣子）
获取事件对象
要考虑兼容
标准浏览器：通过事件触发函数的第一个形参获得
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>
