JS 事件冒泡 示例代码

最新推荐文章于 2023-07-13 11:46:30 发布
最新推荐文章于 2023-07-13 11:46:30 发布
阅读量154 收藏
点赞数
文章标签： JavaScript XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7125/article/details/81761924
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS中的事件冒泡</title>
<script type="text/javascript"><!--
function ClickTr()
{
alert("TR");
}
function ClickTd()
{
alert("TD");
//如果不加下面的代码点击先会弹出TD然后弹出TR，原因是HTML是对象结构当点击AAA的时候（执行）,会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
event.cancelBubble=true;
}

// --></script>
</head>
<body>
<div style="background-color:Azure;" style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
<table>
<tr οnclick="ClickTr();">
<td οnclick="ClickTd();">AAA</td>
<td>BBB</td>
</tr>
</table>
</body>
</html>

iteye_7125
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS事件冒泡代码
刀刀宅
05-18 540
JS事件冒泡
javascript冒泡事件代码
hh_riy_xj的博客
09-02 346
关于JavaScript事件冒泡的代码
jq代码学习10--事件冒泡
vvvbird的专栏
10-03 402
1.停止冒泡时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
JavaScript 事件处理 示例代码
最新发布
06-27
本资源包含事件处理相关的示例代码，包含事件的绑定、常用事件、事件冒泡、事件默认行为、下拉列表、二级菜单级联等的内容本资源包含事件处理相关的示例代码，包含事件的绑定、常用事件、事件冒泡、事件默认行为、...
javascript事件冒泡简单示例
10-22
在下面的示例中，我们将详细探讨JavaScript中的事件冒泡、其原因以及如何阻止它。 事件冒泡是指事件从最深的DOM元素（即事件触发的元素）开始，然后逐级向上层元素传播事件。在这个过程中，每个节点都会接收到相同...
JavaScript阻止事件冒泡示例分享
10-24
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这种机制允许事件在一个元素及其所有...
事件的冒泡
weixin_44154094的博客
01-23 96
事件的冒泡1.定义（这个别跳过）2.代码（定义理解的好此处代码可以忽略） 1.定义（这个别跳过） 事件的冒泡（Bubble） * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 2.代码（定义理解的好此处代码可以忽略） <!DOCTYPE html> <html> <head> <meta charse
JS事件冒泡实例
u010025127的博客
06-25 693
近段时间，在开发中遇到需要自定义选择下拉框，在自己尝试实现下拉选择框时，就遇到今天要探讨的js冒泡问题。于是，针对这个问题，本文结合选择下拉框的实现为例，来探讨一下。 首先看一下什么是事件冒泡 事件冒泡 ：dom树中的一个元素接收到事件的时候，会将事件传递给他的父级元素，直至window。先来看一下简单的例子： <div id="div1"> 父节点 <div id="div2"> ...
解决点击事件冒泡
11-02
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
事件冒泡，事件委托，事件冒泡
weixin_53781355的博客
02-24 200
1.事件流 示例代码： <style> #wrap,#inner,#textSpan{ margin: 5px; padding: 5px; box-sizing: border-box; cursor: default; } #wrapDiv{ width: 300px; height: 300px; border: indianred 3px so
js中事件2-事件冒泡及事件委托
json博客
01-29 257
一、事件冒泡 要了解事件冒泡，先理解下事件处理的三个周期。 DOM处理周期：三个阶段都存在 第一阶段：事件捕获；这步在后台完成，用户无法操作。例如当点击元素div时，实际上点击顺序是：document-html-body-div 第二阶段：目标触发； 第三阶段：事件冒泡；这是用户可以操作的，默认是冒泡。当触发目标后，事件的传递方式。例如当点击元素div时，实际上点击顺序是：div-body-htm...
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 4638
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
js基础（二）：事件（事件冒泡、事件捕获、事件对象、事件委托）
ThisEqualThis的博客
11-11 2832
事件 javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡（event bubbling）,即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，...
Javascript的事件冒泡
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
浅谈JS事件冒泡
aiwu9318的博客
06-16 694
今天要跟大家谈的是事件冒泡，这个事件呢，也是两面性的，有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。 首先看看事件冒泡是什么？ 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 ...
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8839
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
如何阻止事件冒泡
热门推荐
庸人方自扰，自在就好
01-27 1万+
1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
js的冒泡排序代码示例
08-25
以下是一个使用JavaScript实现冒泡排序的示例代码： ```javascript function bubbleSort(arr) { var len = arr.length; for (var i = 0; i ; i++) { for (var j = 0; j ; j++) { if (arr[j] > arr[j + 1]) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值