[javascript]事件冒泡处理
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box1 {
width: 400px;
height: 400px;
background: #ccc;
}
#box2 {
width: 300px;
height: 300px;
background: #ddd;
}
#box3 {
width: 200px;
height: 200px;
background: #eee;
}
</style>
<script type="text/javascript"> function addEventListener(obj, f, type) {
if (obj.addEventListener) {
obj.addEventListener(type, f, false);
} else {
obj.attachEvent('on' + type, function(event) {
f.call(obj, event);
});
}
} function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
} window.onload = function() {
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
var box3 = document.querySelector('#box3'); addEventListener(box1, function(event) {
stopPropagation(event);
alert('box1');
}, 'click'); addEventListener(box2, function(event) {
stopPropagation(event);
alert('box2');
}, 'click'); addEventListener(box3, function(event) {
stopPropagation(event);
alert('box3');
}, 'click');
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
[javascript]事件冒泡处理的更多相关文章
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- 转：JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- JavaScript事件冒泡简介及应用
一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个 ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- 使用DateAdd方法向指定日期添加一段时间间隔，使用TimeSpan对象获取时间间隔
一:使用DateAdd方法向指定日期添加一段时间间隔,截图 二:代码 using System; using System.Collections.Generic; using System.Comp ...
- 配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题
直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...
- winscp自动执行脚本
我们经常使用WinSCP工具通过sftp协议上传获取文件,本文描述通过bat批量处理文件. 首先,我们打开dos命令窗口使用 cd \d :D\WinSCP 打开WinSCP安装目录 上传文件: wi ...
- 《Web 前端面试指南》2、JavaScript 的 Bind 函数进阶
使用 Bind() 设置方法中 this 对象 //<button>获取随机的人</button> //<input type="text"> ...
- 缓存管理Memorycache 的使用
前言:什么是memoryCache? 一种缓存管理技术,某些只读数据频繁操作数据库,会对系统的性能有很大的开销,所以我们使用缓存技术,当数据库内容更新,我们在更更新缓存的数据值.目前缓存讲技术的产 ...
- Lucene多字段搜索
最近在学习Lucene的过程中遇到了需要多域搜索并排序的问题,在网上找了找,资料不是很多,现在都列出来,又需要的可以自己认真看看,都是从其他网站粘贴过来的,所以比较乱,感谢原创的作者们! 使用 ...
- 小学生玩ACM----深搜
Square Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- [Angular 2] ng-model and ng-for with Select and Option elements
You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms ...
- php session_set_save_handler 函数的用法(mysql)(转)
<?php /*============================文件说明======================================== @filename: s ...
- [译]C++如何切分字符串
声明: 翻译仅以技术学习和交流为目的,如需转载请务必标明原帖链接. http://stackoverflow.com/questions/236129/how-to-split-a-string-in ...