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 后的跳转 在W3c中，使用preventDefault（）方法； 在IE下设置window.event.returnValue = false;4.不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。取消事件冒泡在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。看个例子：无标题文档* margin:0; padding:0;var obj1 = document.getElementById(obj1);var obj2 = document.getElementById(obj2);obj1.onclick = function()alert(我点击了obj1);obj2.onclick = function(e)alert(我点击了obj2);在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：无标题文档* margin:0; padding:0;/阻止事件冒泡的通用函数function stopBubble(e)/ 如果传入了事件对象，那么就是非ie浏览器if(e&e.stopPropagation)/因此它支持W3C的stopPropagation()方法e.stopPropagation();else/否则我们使用ie的方法来取消事件冒泡window.event.cancelBubble = true;var obj1 = document.getElementById(obj1);var obj2 = document.getElementById(obj2);obj1.onclick = function()alert(我点击了obj1);obj2.onclick = function(e)alert(我点击了obj2);stopBubble(e);现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。补充实现跨域原理有三个页面：/app.html：应用页面。/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。/data.html：应用页面需要获取数据的页面，可称为数据页面。实现起来基本步骤如下：1. 在应用页面（/app.html）中创建一个iframe，把其src指向数据页面（/data.html）。数据页面会把数据附加到这个iframe的上，data.html代码如下：2. 在应用页面（/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。app.html部分代码如下：3.获取数据以后销毁这个iframe，释放内存；这也保证了安全（