一言以蔽之，曰：“先捕获，后冒泡！”
该代码只适合于有addEventListener方法的浏览器，没有做判断和容错，使用方法为：拷贝代码并保存为xxx.html，用浏览器运行，点击中间的click me，于是有了一个动画效果，很粗糙，只为了庆祝程序员节。
<!DOCTYPE html>
<html>
<head>
<title>Capture & Bubble</title>
<style type="text/css">
div { float: left;border: 1px solid #CCC;padding: 30px;background-color: #FFF; text-align: center; vertical-align: middle;}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div style="width:100px; height:100px; line-height: 100px; cursor:pointer;">Click Me</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var divList = document.getElementsByTagName('div');
var timer = 0;
for (var i = 0, len = divList.length; i < len; i ++) {
(function(j) {
var divNode = divList[j];
var changeBg = function(type) {
if (!divNode.getAttribute('hasClicked')) {
divNode.setAttribute('hasClicked', 0);
}
var hasClicked = divNode.getAttribute('hasClicked') - 0;
if (hasClicked <= 2) {
hasClicked ++;
divNode.setAttribute('hasClicked', hasClicked);
timer ++;
if (hasClicked == 1) {
window.setTimeout(function() {
divNode.style.backgroundColor = '#444';
console.log(type);
}, timer * 1000);
} else {
window.setTimeout(function() {
divNode.style.backgroundColor = '#FFF';
divNode.setAttribute('hasClicked', 0);
console.log(type);
}, timer * 1000);
}
}
};
divNode.addEventListener('click', function(e) {
// capture
changeBg('capture');
}, true);
divNode.addEventListener('click', function(e) {
// bubble
changeBg('bubble');
}, false);
})(i);
}
</script>
</body>
</html>
分享到：
相关推荐
chrome插件开发,完整demo,包含 这是一个popup页面！ background 打开background 调用background页JS方法 获取background页的标题 设置background页标题 (验证background生命周期和单实例特性) 窗口操作演示 新窗口...
【标题】：“Chrome插件JS注入网页Demo” 这个示例是一个关于如何在Chrome浏览器中创建并使用JavaScript（JS）插件来注入代码到网页的详细教程。Chrome插件是基于浏览器扩展机制，允许用户自定义浏览器功能，如添加...
在"full-chrome-plugin-demo"中，我们可以学习如何编写和调用Chrome的API来执行此类任务。 4. **内容脚本**： 内容脚本被注入到网页中，可以直接操作DOM，但不能直接访问浏览器的API。它们用于与网页交互，实现对...
`chrome-plugin-demo-master`的代码中可能包含了一些调试技巧。 8. **发布与更新** 完成插件开发后，可以通过Chrome Web Store发布。`manifest.json`中的`version`字段用于管理插件版本，每次更新都需要递增此值。...
在这个名为"chrome-plugin-demo-master"的压缩包中，你将找到一系列示例，帮助你理解和学习Chrome插件的各种功能开发。 1. **manifest.json**：每个Chrome插件的核心配置文件，它定义了插件的元数据，如名称、版本...
chrome-har-capturer, 从无头 Chrome 实例捕获硬盘文件 chrome-har-capturer 从无头 Chrome 实例捕获硬盘文件。这个模块使用 chrome-remote-interface 来测试 Chrome 。 设置从NPM安装这里模块：npm instal
谷歌Chrome浏览器是一款非常流行的网页浏览器，以其速度、稳定性和安全性受到全球用户的喜爱。然而，有时候在处理特定的网页或应用时，可能需要依赖其他内核，例如IE内核。在这个场景下，"谷歌chrome（扩展ie内核 ...
在这个"chrome插件demo"中，我们主要关注的是不同类型的JavaScript之间的通信，这在Chrome扩展开发中是一个关键的议题。 在Chrome插件的开发中，有多种JavaScript环境同时运行，包括背景脚本（background script）...
chrome插件消息交互机制demo，popup与background以及content_scripts 之间的消息交互demo 详细解释http://blog.csdn.net/summerxiachen/article/details/78698878
在Android WeRTC Demo中，你将学习到如何设置和管理上述组件，以及如何处理网络变化、错误恢复和性能优化等问题。这对于开发实时通信应用，如视频会议、在线教育、远程医疗、游戏等场景来说，是非常有价值的参考资料...
【描述】中的信息虽然简洁，但我们可以推断出这是个示例项目，可能包含了如何设置和运行Selenium测试用例的步骤，特别是针对Chrome浏览器的。这个“demo”可能是为了展示如何配置环境、编写测试脚本以及执行自动化...
在实际应用中，事件冒泡和捕获的区别可能会导致不同的行为。例如，当在一个包含多个嵌套元素的结构中添加事件监听器时，点击内部元素会依次触发所有祖先元素的事件。这可以通过在事件处理函数中使用`event....
Chrome抢票小插件demo是一种基于谷歌浏览器（Chrome）的扩展程序，用于帮助用户提高抢购火车票或其他有限资源的效率。这个demo是为开发者提供一个思路和参考，而不是一个可以直接使用的完整插件。下面我们将深入探讨...
在这个demo中，背景脚本可能是实现消息发送的核心部分。 4. **Popup**：弹出窗口是用户与插件交互的一种方式，通常包含HTML、CSS和JavaScript，用于显示一些设置或功能。 5. **Options Page**：如果需要，插件还...
在"Chrome扩展程序-Demo.zip"这个压缩包中，我们有一个名为"crx-demo"的示例项目，这将引导我们了解如何开发这样的插件。 Chrome扩展程序基于Web技术，如HTML、CSS和JavaScript构建，这意味着如果你熟悉这些技术，...
总的来说，"chrome拓展程序demo"项目是一个实践和学习Chrome拓展开发的好材料，通过对其中代码的分析和修改，开发者可以深入了解Chrome的扩展机制，并开发出符合自己需求的实用工具。同时，这也是提升Web开发技能，...
良田高拍仪兼容chrome进行操作的demo程序，程序需要安装对应的驱动，驱动包含在资源中。控件件支持IE，Chrome，FireFox三大主流浏览器内核，支持Win7，Win8，Win8.1及Win10等操作系统。注意：浏览器需要支持HTML5...
Chrome插件小狐狸钱包demoChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChromeChrome
标题中的"C# chrome内核浏览器"指的是使用C#编程语言开发的、基于Google Chrome浏览器内核的Web浏览器应用。这种浏览器通常利用Chromium开源项目提供的Web渲染引擎，以实现高速的网页加载和良好的兼容性。在C#中，...
标题中的“谷歌浏览器网页元素分析工具+Chrome_SPY+元素捕获+PRA”涉及到的是在Web开发和调试过程中常用的一些技术与工具。下面将详细解释这些概念。 1. **谷歌浏览器**（Google Chrome）：这是一款由谷歌公司开发...