杰晶网络

详解javascript事件冒泡
网络编程 2024/5/19 佚名
3 2

事件是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,事件冒泡
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“详解javascript事件冒泡”
暂无“详解javascript事件冒泡”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接