如上图：
事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。addEventListener的第三个参数决定事件处理函数在冒泡还是捕获阶段执行，设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。默认值是false
阻止事件冒泡：
DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行.IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用.jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();阻止默认行为：
DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行。IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用。jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()event.target:触发事件的元素（即被点击的元素） event.currentTarget:绑定事件的元素（与this相等） 下面通过两个例子说明 示例一（每个元素都绑定事件）：
<div id="a"> <div id="b"> <div id="c"> <div id="d"></div> </div> </div> </div> <script> document.getElementById('a').addEventListener('click', function(e) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('b').addEventListener('click', function(e) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('c').addEventListener('click', function(e) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('d').addEventListener('click', function(e) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); </script>上面事件的绑定都是在冒泡阶段的，当我们点击最里层的元素d的时候，会依次输出: target:d¤tTarget:d target:d¤tTarget:c target:d¤tTarget:b target:d¤tTarget:a 从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。 如果我们把事件都绑定在捕获阶段，然后还是点击最里层的元素d，这时event.target还依旧会指向d，因为那是引起事件触发的元素，因为event.currentTaget指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下： target:d¤tTarget:a target:d¤tTarget:b target:d¤tTarget:c target:d¤tTarget:d
示例二（只给父元素绑定事件,利用事件委托）：
<ul id="ulT"> <li class="item1">fsda</li> <li class="item2">ewre</li> <li class="item3">qewe</li> <li class="item4">xvc</li> <li class="item5">134</li> </ul> <script type="text/javascript"> document.getElementById("ulT").onclick = function (event) { console.log(event.target); console.log(event.currentTarget); } </script>此时无论点击哪个li,event.currentTarget都是ul，event.target是对应的被点击的li
event对象常用属性和方法：
event.preventDefault();//阻止默认事件 event.isDefaultPrevented();//检测 event.preventDefault() 是否被调用过 event.currentTarget;//发起事件的标签 event.target;//触发事件的标签 event.type//事件的类型 event.pageX;event.pageY //相对于文件的左侧和顶部边缘的位置 event.which;//针对键盘和鼠标事件，确定底按的是哪个键或按钮 常用在keydown事件中 event.timeStamp;//事件触发时与事件创建之间的时间间隔 event.stopPropagation(); //阻止事件的冒泡 摘自 爱jQuery：http://www.aijquery.cn/Html/jqueryrumen/25.html