<script src="js/冒泡.js"></script>
<script type=text/javascript>
</script>
<style>
body{
margin:0px;
padding:0px;
}
#div1{
width:300px;
height:200px;
background:#CC3;
margin:30px auto 0px 10px;
position:relative;
}
#div2{
width:300px;
height:200px;
background:#096;
position:absolute;
left:310px;
}
#div11{
margin-left:10px;
}
</style>
</head>
<body id='obody'>
<div id='div1' class='div1'>
xxxxxx
<div id='div11' class='div1'>fasdfa</div>
</div>
<div id='div2' class='div1'>
</div>
<div id='div3' class='div1' style="width:200px">
<div id='div31' class='div1'></div>
</div>
</body>
//冒泡
//若有结构如body--div1--div11 冒泡就是从div11--div1--body每一个节点都会触发事件
//来一例子
window.onload=function(){
/*
document.getElementById('obody').onclick=function(evt){
var e=evt||winow.event;
console.info("返回触发此事件的元素: "+e.target+" "+"返回其事件监听器触发该事件的元素: "+e.currentTarget);
console.info("返回触发此事件的元素id: "+e.target.id+" "+"返回其事件监听器触发该事件的元素id: "+e.currentTarget.id);
//结果对比下
//返回触发此事件的元素: [object HTMLDivElement] 返回其事件监听器触发该事件的元素: [object HTMLBodyElement]
//冒泡.js:9 返回触发此事件的元素id: div1 返回其事件监听器触发该事件的元素id: obody
//冒泡.js:8 返回触发此事件的元素: [object HTMLDivElement] 返回其事件监听器触发该事件的元素: [object HTMLBodyElement]
//冒泡.js:9 返回触发此事件的元素id: div11 返回其事件监听器触发该事件的元素id: obody
};
*/
//由冒泡特性，如果我对body--div1--div三个节点分别添加了事件，根据其特性可知，点了div11，他的事件会触发，div1也会，当然包括body了
//所以有个要解决的问题就是，点了div11就触发div11的事件，
//解决方案有两种,一种不让它向上冒泡，第二种就是代理了,第一种是有缺点的
//第一种
document.getElementById('obody').onclick=function(evt){
var e=evt||winow.event;
console.info("谢谢光顾body");
};
document.getElementById('div11').onclick=function(evt){
var e=evt||winow.event;
console.info("谢谢光顾div11");
e.stopPropagation();
//换一种不行
//e.preventDefault();//通知浏览器不要执行与事件关联的默认动作
//事件传播和默认操作是二个不同的机制，
//一个是向上冒泡 一个是执行默认操作
};
//测试结果ok
//第二种
//为了正常的向上冒泡，那就用代理吧(听起来可怕，实现起来很简单)
/*
document.getElementById('obody').onclick=function(evt){
var e=evt||winow.event;
if(e.target.id=='div11'){
console.info("谢谢光顾div11");
}else if(e.target.id=='obody'){
console.info("谢谢光顾body");
}
};
*/
};
//到此结束
相关推荐
冒泡排序是一种基础的排序算法，它通过重复遍历待排序的序列，比较相邻元素并交换位置，使得每...在实际开发中，还可以考虑优化冒泡排序算法，如添加标志位来检测数组是否已排序，以及采用双向冒泡排序等方法提高效率。
#### 五、JavaScript的应用与实践 ##### 实验目的 1. **综合应用能力提升**: 综合运用以上学到的知识点完成更复杂的任务。 ##### 实验内容分析 1. **个人信息表单**: - 设计表单收集用户的个人信息，包括姓名、...
9. **性能工具**：介绍如何利用Chrome DevTools和其他性能分析工具进行性能测试和调试，以及如何解读性能报告。 10. **最佳实践与案例研究**：通过实际案例，展示如何将这些理论应用到项目中，提高代码质量和运行...
11. **调试和测试**：提供JavaScript性能测试和调试的工具和技巧，帮助开发者识别和修复性能问题。 12. **源码分析**：通过实例分析JavaScript库和框架的源码，揭示其中的性能优化策略。 这本书对于想要提升...
通过分析这些解题报告，你可以学到以下JavaScript相关的知识点： 1. **基本语法**：包括变量声明（var、let、const）、作用域、函数定义、数组操作、对象字面量等基础概念。 2. **数据结构**：如数组、链表、栈、...
此外，JavaScript中的对象是键值对的集合，可以用来表示复杂的数据结构。了解如何创建和操作对象，包括属性和方法，是进阶学习的关键。 三、DOM操作 DOM（Document Object Model）是HTML和XML文档的结构化表示，...
通过分析这些JavaScript小游戏，你可以深入了解如何运用上述知识点构建互动的网页应用。每个游戏都可能包含独特的设计和实现，提供了一个实践和学习JavaScript的好机会。无论你是初学者还是经验丰富的开发者，都能...
- **调试与测试技巧**：提供实用的调试工具和测试策略，帮助开发者定位问题并确保代码质量。 ### 小结 《JavaScript权威指南》（第5版）不仅仅是一本介绍JavaScript基础知识的书籍，它还涵盖了大量高级主题和技术...
2. **事件绑定与监听**：详解事件流机制，包括冒泡阶段和捕获阶段，掌握常见事件类型及其触发方式。 3. **动态内容更新**：通过AJAX技术实现异步加载数据，保持页面交互性的同时避免刷新带来的用户体验下降。 #### ...
《函数与变量作用域》章节，深入分析了JavaScript中函数的细节以及作用域规则。这可能包括： - 函数声明与表达式的区别。 - 闭包的原理与应用。 - 变量的作用域链。 - 非局部变量的访问机制。 ### 六、利用...
- **User Agent字符串**：通过分析浏览器发送的User Agent字符串来检测浏览器类型。 - **Feature Detection**：通过实际测试浏览器功能来判断是否支持某项技术，这是一种更加可靠的方法。 #### 十、正则表达式 - *...
《JavaScript王者归来》是一部深入探讨JavaScript编程...在阅读和实践这些源代码时，建议结合书中的讲解逐步分析，以确保对每个示例都有透彻的理解。同时，也可以通过修改和扩展源代码来提升自己的编程技巧和创新能力。
在本文中，我们将深入探讨如何使用Flash创建一个冒泡效果，以及如何将这种...尽管现代网页设计倾向于使用更现代的技术，如JavaScript库和WebGL，但理解并掌握Flash动画的制作技巧仍对提升设计师的综合能力大有裨益。
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的编程语言，主要负责实现客户端的动态效果和交互功能。它的语法与Java有相似之处，但两者并非同一语言。本指南将带你从零开始，逐步深入理解JavaScript的...
10. **调试与测试**：掌握使用开发者工具进行调试，设置断点、查看调用栈、分析性能等技巧，以及编写单元测试和集成测试，确保代码的正确性和稳定性。 通过"JAVASCRIPT 技术经典再学习"，我们可以深入理解...
- **测试与调试**：讨论单元测试、集成测试的重要性，以及如何使用浏览器开发者工具进行调试。 #### 结论 《Professional JavaScript™ for Web Developers》是一本全面覆盖JavaScript核心技术和最佳实践的书籍，...
10. 测试JavaScript代码：介绍单元测试和集成测试，以及测试框架如Jest或Mocha的使用。 11. 高级JavaScript概念：探讨原型链、作用域和上下文、垃圾回收机制等。 12. 前端框架介绍：概述前端流行框架如React、Vue....
6. **内存检测**：内存泄漏是JavaScript中常见的问题，通过内存分析工具可以检测是否存在未释放的对象，从而导致内存占用持续增长。 7. **源码映射**：在处理压缩或编译后的代码时，源码映射文件（source map）可以...