事件对象，冒泡

1. 当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。事件对象，我们一般称作为event 对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。那么首先，我们就必须验证一下，在执行函数中没有传递参数，是否可以得到隐藏的参数。

function box() { //普通空参函数
　　alert(arguments.length); //0，没有得到任何传递的参数
}
input.onclick = function () { //事件绑定的执行函数
　　alert(arguments.length); //1，得到一个隐藏参数
};

通过上面两组函数中，我们发现，通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是event 对象。

input.onclick = function () {
　　alert(arguments[0]); //MouseEvent，鼠标事件对象
};

　//上面这种做法比较累，那么比较简单的做法是，直接通过接收参数来得到即可。
　input.onclick = function (evt) { 　　//接受event 对象，名称不一定非要event
　　　alert(evt); 　　　　　　//MouseEvent，鼠标事件对象
　};

//直接接收event 对象，是W3C 的做法，IE 不支持，IE 自己定义了一个event 对象，直接在window.event 获取即可。
　input.onclick = function (evt) {
　　　var e = evt || window.event;   //实现跨浏览器兼容获取event 对象
　　　alert(e);
　};

2.可视区域及屏幕的坐标

document.onclick = function (evt) {
　　var e = evt || window.event;
　　alert(e.clientX + ',' + e.clientY); //鼠标点击位置的坐标 ，（在视口范围内，即body）
　　alert(e.screenX + ',' + e.screenY); //鼠标点击位置的坐标，（在电脑屏幕范围内，即视口+头部标题，地址栏，最下方任务栏等）
}; 

 3.事件冒泡，是从里往外逐个触发。

//比如div 包含 input ,div 跟 input都绑定了点击事件，那么当点击了input, div的点击事件也会触发，由里向外

<div id="box"><input type="text" /></div>

document.onclick = function () {
　　alert('我是document');
};
document.documentElement.onclick = function () {
　　alert('我是html');
};
document.body.onclick = function () {
　　alert('我是body');
};
document.getElementById('box').onclick = function () {
　　alert('我是div');
};
document.getElementsByTagName('input')[0].onclick = function () {
　　alert('我是input');
};

阻止事件冒泡：

//在阻止冒泡的过程中，W3C 和IE 采用的不同的方法，那么我们必须做一下兼容。
function stopPro(evt) {
　　var e = evt || window.event;
　　window.event ? e.cancelBubble = true : e.stopPropagation();
}