1、事件对象——Event
1.1 什么事event：用来获取事件的详细信息，比如键盘事件，鼠标事件等等。
1.2 事件的兼容写法：IE，直接用event，firefox需要系统传入事件对象
document.onclick=function (ev){
var oEvent=ev||event;
}
2、事件发生的三个阶段
先看下面的栗子
当点击绿色的div时，事件会经历三个阶段：事件捕获阶段，目标阶段和事件冒泡阶段。
其中，Internet Explorer 8只支持事件冒泡，不支持事件捕获
其他主流浏览器比如chrome和firefox可以通过函数指定事件是否在捕获或冒泡阶段执行
绑定事件函数：element.addEventListener(event, function, useCapture)；
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，可以使用 attachEvent() 方法来添加事件句柄
其中：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
所以在IE或者火狐或者谷歌浏览器上，上面的例子点击绿色的div，会依次弹出div2->div1->body->html
事件冒泡作用（本例子来自 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html）
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，
//难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。 function eventHandle(e) { var e=e||window.event; var obj=e.target||e.srcElement; alert(obj.id+‘ was click‘) } </script>
事件冒泡带来的麻烦（本例子来自 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html）
<div onclick="openWin(‘http://www.baidu.com‘)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin(‘http://www.google.com‘)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页
function openWin(url)
{
window.open(url);
}
</script>
阻止事件冒泡
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true //IE浏览器
}
原文：http://www.cnblogs.com/sheilooblog/p/5243852.html