js 事件冒泡 测试

最新推荐文章于 2020-10-10 17:05:14 发布
原创 最新推荐文章于 2020-10-10 17:05:14 发布 · 383 阅读 · 0 ·
CC 4.0 BY-SA版权
本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意
文章标签：

#javascript #事件冒泡

本文通过一个简单的HTML示例介绍了事件冒泡的概念，并展示了如何使用JavaScript的addEventListener来为DOM元素添加点击事件监听器。该示例包括两个嵌套的div元素，分别绑定了点击事件，演示了事件冒泡的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js 写多了 回头看看这个事件冒泡  没啥意思  但是也整理一下

注意 addEventListener 的第三个参数

还有 这个不是问题  也不是缺陷    只是一个机制  


html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/JavaScript6.js"></script>
    <link href="../Content/StyleSheet6.css" rel="stylesheet" />
</head>
<body>
    <div id="id1">
        <div id="id2"></div>
    </div>
</body>
</html>


js 

window.onload = function () {
    document.getElementById('id1').addEventListener('click', function () { alert('id1'); }, false);
    document.getElementById('id2').addEventListener('click', function () { alert('id2'); }, false);
};


css 

body {
}
#id1 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: blue;
    z-index: 4;
    cursor:pointer;
}
#id2 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20px;
    left: 70px;
    background-color: green;
    z-index: 1;
    cursor:pointer;
}




雪雪不吃香菜
xuexue393939的博客
02-24 244
确定项目 立项——产品说明书——需求文档——需求评审 详细概要设计——编码——自测——提测 测试计划——编写测试用例——测试用例评审——提测 开发环境(开发专用) 测试环境(测试专用) 提测——冒泡测试(测试流程是否通过)——功能测试——禅道记录BUG——回归测试(验证上个问题是否修改 有没有引发新的bug)——验收测试(客户本公司开发测试,经历需求)——上线 黑盒子白盒子测试 黑盒子测试 不需要了解程序的源代码 通过使用整个软件功能来验证程序是否满足需求的测试方法 白盒子测试
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 9500
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
js事件冒泡 测试
ning
04-23 1463
网上的例子用的是$(".b").live("click",function(event){} ，jquery自动对live做了处理，阻止了事件冒泡。改成bind，实验就能通过。 无标题文档 $(function(){ $(".b").bind("click",function(event){ $(this).css("color","#FF3300"); event.
冒烟测试
码农一个
10-20 2859
冒烟测试（smoke testing）,据说是微软起的名字。在《微软项目求生法则》一书第14章“构建过程”关于冒烟测试，就是开发人员在个人版本的软件上执行目前的冒烟测试项目，确定新的程序代码不出故障。 冒烟测试的名称可以理解为该种测试耗时短，仅用一袋烟功夫足够了。也有人认为是形象地类比新电路板功基本功能检查。任何新电路板焊好后，先通电检查，如果存在设计缺陷，电路板可能会短路，板子冒烟了。 冒烟
什么是冒烟测试？
Lynn.Zhou的专栏
04-18 3244
＃这是本人认为关于冒烟测试比较好的概念解释了        关于冒烟测试，应该是微软首先提出来的一个概念，和微软一直提倡的每日build有很密切的联系。具体说，冒烟测试就是在每日build建立后，对系统的基本功能进行简单的测试。这种测试强调功能的覆盖率，而不对功能的正确性进行验证。从这一点看和所谓的“接受性（验收）测试（AcceptanceTest）”非常相似。不同之处就在于他们执
js事件冒泡实例分享(已测试)
10-27
在JavaScript中，事件冒泡是一种事件处理机制，它描述了事件如何从最深的节点（事件实际发生的元素）向上逐级传播到最不深的节点（即包含它的所有祖先元素）。当在某个元素上触发一个事件时，该事件会首先在这个元素...
JavaScript事件冒泡机制原理实例解析
01-21
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习...js事件冒泡测试</title> </head> <body> <div id='content'
js冒泡事件测试
04-15
关于冒泡事件的demo，教你实现js的冒泡处理，适用于各种浏览器
软件测试系列——冒烟测试（Smoke Test，ST）
热门推荐
程序员-小枫的博客
08-29 2万+
1.核心 冒烟测试就是完成一个新版本的开发后，对该版本最基本的功能进行测试，保证基本的功能和流程能走通。 　　如果不通过，则打回开发那边重新开发； 　　如果通过测试，才会进行下一步的测试(功能测试，集成测试，系统测试等等)。 简化：门槛测试，一个开关而不是一个阶段。 目的：版本验证测试BVT（Build Verification Testing）。 时间：开发转测试，历时半至一个小时，很短。 对象：需求覆盖，主功能路径。 优点：节省测试时间，防止build失败。 缺点：覆盖率还是比较低。.
回归测试
mlc0202的专栏
05-25 471
1.回归测试是指重复以前的全部或部分的相同测试。 　　 2.新加入测试的模组，可能对其他模组产生副作用，故须进行某些程度的回归测试。 　　   3.回归测试的重心，以关键性模组为核心。...
冒泡排序 及测试
F846368440的博客
12-11 1964
public static void bubbleSort(int[] numbers) { int temp = 0; int size = numbers.length; for(int i = 0 ; i &lt; size-1; i ++) { for(int j = 0 ;j &lt; siz...
排序算法——冒泡排序系列及性能测试
vcj1009784814的博客
10-10 2132
初识冒泡排序 排序算法常常作为学习算法的入门实践，而冒泡排序又是其中最简单的一种，我们今天的主题就是冒泡排序。它的基本思想就像鱼吐泡泡一样简单。 想象有一条鱼在数组的最底端，每一轮，它就吐个泡泡，泡泡会从数组一端漂到另一端，在漂浮过程中，泡泡会捕获数组中待排序的部分中最大的元素，将其移动到最顶端，然后把这个元素从数组待排序部分中剔除。下一轮又从剩余的待排序元素中选一个最大的，用泡泡再次将其上浮到最顶端。如此一来，经过n轮吐泡泡。从数组最顶端往下，依次就是最大的元素，第二大的元素，第三大的元素…整个数组就是有
白盒测试测试冒泡排序法
Geoooo的博客
04-20 6610
白盒测试法测冒泡排序法 1.冒泡排序法Java源代码 /* * 冒泡排序 */ public class BubbleSort { 　　 public void BubbleSort(int[] arr){ 　　　　for(int i=0;i<arr.length-1;i++){//外层循环控制排序趟数 　　　　　　for(int j=0;j<arr...
JS 上传文件之FormData 与Blob 对象
Rand Tsui
03-20 1万+
SA $.domLoad(function () { var formdata = new FormData(); formdata.append("a","ffdfdf"); formdata.append("file1",new Blob(["Hello World!"],{t
常见竖屏设备屏幕宽高比
Rand Tsui
09-12 1万+
平板设备 768 / 1024 = 0.75 834 / 1112 = 0.75 1024 / 1366 =0.7496339677891654465592972181552‬ 正常手机 320 / 568 =0.56338028169014084507042253521127‬ 360 / 640 =0.5625 375 / 667 =0.56221889055472...
【JavaScript】String 转 ArrayBuffer
Rand Tsui
07-21 8554
function String2ArrayBuffer(str, cb) { var b = new Blob([str]); var f = new FileReader(); f.onload = function(e) { cb(e.target.result); } f.rea...
JS 手机端滑动分页插件 SPager 最新版
Rand Tsui
07-28 7447
JS /* SPager 调用说明 */ //第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize //第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素 //第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画gif图片
JS事件冒泡及其浏览器兼容性问题解决策略
3. 测试和修正：在不同浏览器中测试事件冒泡的行为，发现不一致时，编写特定的代码进行修正。 ### 实际应用中注意事项 1. 避免不必要的冒泡：对于不需要冒泡的事件，应该在事件处理函数中调用`stopPropagation()`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值