js中深度讲解捕获和冒泡

冒泡和捕获1.捕获阶段：事件从最不精确的对象(document对象)开始触发，然后到事件目标，从外向内捕获事件对象；2.目标阶段：到达事件目标位置（事发地），触发事件；3.冒泡阶段：事件按照从最特定的事件目标开始，沿着文档逐层向上冒泡，到document为止，从内向外冒泡事件对象。4.DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。5.了解：DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。6.事件的传播是可以阻止的：•在W3c中，使用stopPropagation（）方法•在IE下设置cancelBubble=true；在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~3.阻止事件的默认行为，例如clicka后的跳转~•在W3c中，使用preventDefault（）方法；•在IE下设置window.event.returnValue=false;4.不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。取消事件冒泡在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。看个例子：!DOCTYPEhtmlhtmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css*{margin:0;padding:0;}/style/headbodydivid=obj1style=width:500px;height:500px;background:#000;divid=obj2style=width:400px;height:400px;background:red;/div/divscripttype=text/javascriptvarobj1=document.getElementById('obj1');varobj2=document.getElementById('obj2');obj1.onclick=function(){alert('我点击了obj1');}obj2.onclick=function(e){alert('我点击了obj2');}/script/body/html在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：!DOCTYPEhtmlhtmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css*{margin:0;padding:0;}/style/headbodydivid=obj1style=width:500px;height:500px;background:#000;divid=obj2style=width:400px;height:400px;background:red;/div/divscripttype=text/javascript//阻止事件冒泡的通用函数functionstopBubble(e){//如果传入了事件对象，那么就是非ie浏览器if(e&&e.stopPropagation){//因此它支持W3C的stopPropagation()方法e.stopPropagation();}else{//否则我们使用ie的方法来取消事件冒泡window.event.cancelBubble=true;}}varobj1=document.getElementById('obj1');varobj2=document.getElementById('obj2');obj1.onclick=function(){alert('我点击了obj1');}obj2.onclick=function(e){alert('我点击了obj2');stopBubble(e);}/script/body/html现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。[补充]window.name实现跨域原理有三个页面：a.com/app.html：应用页面。a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。实现起来基本步骤如下：1.在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：2.在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。app.html部分代码如下：3.获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域framejs访问）总结起来即：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。