无为清净楼资源网

详解javascript事件冒泡
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

事件是javascript中的核心内容之一，在对事件的应用中不可避免的要涉及到一个重要的概念，那就是事件冒泡，在介绍事件冒泡之前，先介绍一下另一个重要的概念事件流：
一.什么是事件流:
文档对象模型（DOM）是一个树形结构，可以形象的用下图表示。

详解javascript事件冒泡

如果一个html元素触发事件，那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播，所有经过的节点都会接收到被触发的事件，这个传播过程被称之为事件流。按照事件的传播顺序，可以将其分为两类，一种是事件冒泡，一种是事件捕获，这里就涉及到本章要介绍的主题了：
1.事件冒泡:
所谓的时间冒泡就是当一个元素触发一个事件，事件会像是水泡一样，从触发元素向它的所有父节点传播，一直到根节点都会接收到此事件，如果父元素中注册了相应的事件处理函数，那么尽管事件在子节点触发的，在父元素上注册的事件处理函数同样会被触发。例如在上面图示中，如果触发a元素的onclick事件，那么它的父元素p、document和widow都会接收到此事件，并且如果在相应的父元素注册有时间处理函数，那么此事件处理函数将会执行，看一段代码实例:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
</table>
</body>
</html>

以上代码的目的是，当点击相应的单元格的时候就会弹出对应单元格中的内容。但是在上面的实现中并不是为每一个单元格注册onclick事件处理函数，而是将onclick事件处理函数注册于单元格的父元素table上，当点击单元格的时候会触发onclick事件，事件还会从从事件对象向上传播，而table元素恰好有注册的onclick事件处理函数，这个时候就会执行此处理函数，当然这里会设置到传递事件对象参数的问题。所有的浏览器都支持事件冒泡。二.事件捕获:
事件捕获和事件冒泡恰好相反，当点击一个元素的时候，事件传播的方向是从根元素到触发元素，IE浏览器并不支持，为了跨浏览器支持，所以默认情况下一般都是使用冒泡型事件处理模型。
2.javascript阻止事件冒泡代码
事件冒泡在某些场景非常的有用，但是有时候也是必须要阻止，下面是一段能够兼容所有主流浏览器的阻止事件冒泡的实例代码。
代码实例:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

以上代码可以阻止事件冒泡，下面对代码做一下简单注释:
二、代码注释:

  • 1.function stopBubble(e) {}，此函数用来阻止事件冒泡，参数是个事件对象。
  • 2. if(e&&e.stopPropagation){e.stopPropagation();}，判断是否支持stopPropagation，如果支持就使用e.stopPropagation()。stopPropagation()函数IE10和IE10以下浏览器不支持。
  • 3.window.event.cancelBubble=true，当前IE浏览器使用这个可以阻止事件冒泡。

以上就是关于javascript事件冒泡的详细介绍，希望对大家的学习有所帮助。

标签：
javascript,事件冒泡
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接