一 介绍
1、当浏览者在页面上执行了某个动作,页面上实际上有多个元素可以响应该事件,假如单机页面的某个按钮,该按钮又处于<div>元素之内,则实际上用户既单机了该按钮,也单击了<div>元素。
2、IE中的事件传递方向是从事件发生的对象开始,然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的,因此这种事件的传递机制又称为冒泡。
3、下面应用说明了这种机制的用法
二 冒泡机制代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> Internet Explorer事件冒泡机制 </title> </head> <body onclick="gotClick('body元素');"> <table onclick="gotClick('table元素');"> <tr onclick="gotClick('tr元素');"> <td onclick="gotClick('td元素');"> <p onclick="gotClick('p元素');"> <input type="button" value="单击我" onclick="gotClick('按钮');" /> </p> </td> </tr> </table> <hr/> <div id="results"></div> <script type="text/javascript"> var gotClick = function(who) { document.getElementById("results").innerHTML += who + " 被单击了 <br />"; } </script> </body> </html>
三 冒泡机制代码运行结果
四 阻止冒泡机制代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> Internet Explorer事件冒泡机制 </title> </head> <body onclick="gotClick('body元素');"> <table onclick="gotClick('table元素');"> <tr onclick="gotClick('tr元素');"> <td onclick="gotClick('td元素');"> <p onclick="gotClick('p元素');"> <input type="button" value="单击我" onclick="gotClick('按钮'); event.cancelBubble=true;" /> </p> </td> </tr> </table> <hr/> <div id="results"></div> <script type="text/javascript"> var gotClick = function(who) { document.getElementById("results").innerHTML += who + " 被单击了 <br />"; } </script> </body> </html>
五 阻止冒泡机制代码运行结果
相关推荐
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
一种解决事件冒泡的方法,有较好的浏览器兼容性,具体思路参见文档: http://blog.csdn.net/ivyandrich/article/details/22041933
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个...
主要介绍了Javascript 事件冒泡机制详细介绍的相关资料,需要的朋友可以参考下
div 里面绑定div 2个DIV都绑定了 click事件,怎么点里面的div不会执行到外面DIV的事件,冒泡!这个案例 比较简单,仅供大家学习
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件(案例);2、键盘事件;2、键盘事件(案例);3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;...3、事件的冒泡与阻止
//如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event....
本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。...关键词:事件冒泡、取消冒泡、单击事件。用途:学习如何使用JavaScript取消HTML事件的冒泡。
jquery阻止事件冒泡jquery阻止事件冒泡jquery阻止事件冒泡
事件冒泡、事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,...
并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件 2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。 js事件捕获一般通过DOM2事件模型...