事件冒泡微软提出了一种事件流，叫做事件冒泡.事件冒泡可以形象地比作将一块石头扔进水里，气泡总会从水底冒出来。换句话说，事件将从最里面的元素开始向上传播，直到文档对象。因此，在事件冒泡的理念下，div元素的点击事件顺序应该是div->body->html->document事件捕获。Netscape提出了另一种事件流，称为事件捕捉（eventcapturing）。与事件冒泡相反，事件从最外层发生到最具体的元素。所以在事件捕获的理念下，div元素的点击事件的顺序应该是document->html->body->div->divw3c采用了一种折中的方式，制定了统一的标准——先捕获，再冒泡。addEventListener的第三个参数默认值为false，表示在事件冒泡阶段调用事件处理函数；如果参数为真，则表示在事件捕获阶段调用处理函数。测试事件冒泡-点击蓝色s1=document.getElementById('s1')s2=document.getElementById('s2')s3=document.getElementById('s3')s1.addEventListener("click",function(e){console.log("红色冒泡事件");//自下而上},false);//第三个参数默认值为false，表示在事件冒泡阶段调用事件处理函数；如果参数为true，则表示在事件捕获阶段调用处理函数。s2.addEventListener("点击",function(e){console.log("黄色冒泡事件");},false);s3.addEventListener("click",function(e){console.log("蓝色冒泡事件bubbleevent");},false);测试事件捕获-点击蓝色s1.addEventListener("click",function(e){console.log("redcaptureevent");},true);s2.addEventListener("click",function(e){console.log("黄色捕获事件");},true);s3.addEventListener("click",function(e){console.log("蓝色捕获事件");},true);事件捕获和事件冒泡是同时存在的——先捕获再冒泡。这里将被点击的DOM节点记录为目标节点，文档转到目标节点，抓包继续进行。当遇到注册的捕获事件时，立即触发执行，到达目标节点。对于目标节点上的触发事件，不管是先捕获还是先冒泡，按照捕获事件和冒泡事件的注册顺序先注册，目标节点先执行到文档的方向，和冒泡进行，遇到注册的冒泡事件立即触发s1。addEventListener("点击",function(e){console.log("红色冒泡事件");},false);s2.addEventListener("点击",function(e){console.log("黄色冒泡事件");},false);s3.addEventListener("点击",function(e){console.log("蓝色冒泡事件");},false);s1.addEventListener("click",function(e){console.log("红色捕获事件");},真的）;s2.addEventListener("click",function(e){console.log("黄色捕获事件");},true);s3.addEventListener("click",function(e){console.log("蓝色捕获事件");},true);应用：事件委托（也叫事件代理）比如我想点击ul标签中的li获取它的值，有人会遍历给每一个li添加事件监听器。我们可以给li的parent添加一个事件监听器，相当于把事件监听器委托给ul。当我们点击li时，会显示值

1

2

3

4

5

6

7

ul=document.getElementById('ur')ul.addEventListener("点击",function(e){console.log(e.target.innerText);},false);onclick事件分析onclick不能像addEventListener那样指定事件类型，只能是事件冒泡s1.onclick=function(){console.log('red')}s2.onclick=function(){console.log('yellow')}s3.onclick=function(){console.log('blue')returntrue}防止事件冒泡和事件默认行为，但是有时候我们不想触发事件冒泡，或者不想触发一些默认方法e.stopPropagation()这是W3C标准方法，stopPropagation是一个事件对象（Event）的一个方法，作用是防止目标元素冒泡事件，但不会防止默认行为。如果IE使用IE，则使用e.cancelBubble=truefunctionstopBubble(e){//如果提供了事件对象，则这是非IE浏览器if(e&&e.stopPropagation)//所以支持W3C的stopPropagation()方法e.stopPropagation();else//否则需要使用IE的方法取消事件冒泡窗口.event.cancelBubble=true;}e.preventDefault()preventDefault是事件对象（Event）的一个方法，其作用是取消目标元素的默认行为。既然指的是默认行为，当然元素必须有默认行为才能取消。如果元素本身没有默认行为，调用当然是无效的。哪些元素有默认行为？如链接，提交按钮等。当Event对象的cancelable为false时，表示没有默认行为。即使有默认行为，调用preventDefault也不会起作用。returnfalsejavascript的returnfalse只会阻止默认行为，但是对于jQuery，它会同时阻止默认行为和对象冒泡。//阻止浏览器默认行为的总结functionstopDefault(e){//阻止默认浏览器操作（W3C）//防止IE中功能设备默认动作的方法elsewindow.event.returnValue=false;返回假；}