js event事件的传递与冒泡处理


Posted in Javascript onDecember 06, 2009
<div> 
<table nclick="gotClick(event,'table',this)" id="table"> 
<tr nclick="gotClick(event,'tr',this)" id="tr"> 
<td nclick="gotClick(event,'td',this)" id="td"> 
<input type="button" name="button" value="单击我" 
onclick="gotClick(event,'按钮',this);" id="button"> 
</td> 
</tr> 
</table> 
</div> 
<div id='result'> 
</div>

js文件
function gotClick(event,msg,obj){ 
var object; 
var msgs = msg+" => 被单击了!<br/>"; 
try{ 
if (event.target) {//Mozilla 
object = event.target; 
// alert(document.getElementById(object.id).nodeName+" Mozilla "+msg); 
document.getElementById('result').innerHTML +=msgs; 
// event.cancelBubble=true;//阻止传递 
} 
else if(event.srcElement){//IE 
object = event.srcElement; 
// alert(object.id+" IE "+msg); 
// event.cancelBubble=true;//阻止传递 
document.getElementById('result').innerHTML +=msgs; 
} 
}catch(e){ 
alert(e); 
} }

运行结果是:

按钮 => 被单击了!
td => 被单击了!
tr => 被单击了!
table => 被单击了!

Javascript 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
小程序实现搜索框
Jun 19 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
IE和firefox浏览器的event事件兼容性汇总
Dec 06 #Javascript
js 操作select相关方法函数
Dec 06 #Javascript
JavaScript 对象模型 执行模型
Dec 06 #Javascript
ASP Json Parser修正版
Dec 06 #Javascript
jquery ready函数源代码研究
Dec 06 #Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 #Javascript
javascript 动态生成私有变量访问器
Dec 06 #Javascript
You might like
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python远程邮件控制电脑升级版
2019/05/23 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
什么时候用assert
2015/05/08 面试题
中学自我评价
2014/01/31 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
环保倡议书50字
2014/05/15 职场文书
校本教研活动总结
2014/07/01 职场文书
药店采购员岗位职责
2014/09/30 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB