js中深度讲解捕获的和冒泡.docx

冒泡和捕获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.阻止事件的默认行为，例如click a后的跳转~? 在W3c中，使用preventDefault（）方法；? 在IE下设置window.event.returnValue = false;4.不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。/zhenn/archive/2011/02/19/1958748.html取消事件冒泡在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。看个例子：!DOCTYPE htmlhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle type=text/css*{ margin:0; padding:0;}/style/headbodydiv id=obj1 style= width:500px; height:500px; background:#000;div id=obj2 style=width:400px; height:400px; background:red;/div/divscript type=text/javascriptvar obj1 = document.getElementById(obj1);var obj2 = document.getElementById(obj2);obj1.onclick = function(){alert(我点击了obj1);}obj2.onclick = function(e){alert(我点击了obj2);}/script/body/html在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：!DOCTYPE htmlhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle type=text/css*{ margin:0; padding:0;}/style/headbodydiv id=obj1 style= width:500px; height:500px; background:#000;div id=obj2 style=width:400px; height:400px; background:red;/div/divscript type=text/javascript//阻止事件冒泡的通用函数function stopBubble(e){// 如果传入了事件对象，那么就是非ie浏览器if(ee.stopPropagation){//因此它支持W3C的stopPropagation()方法e.stopProp