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();
}