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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
通过html表格发电子邮件
2006/10/09 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
javascript 数组操作详解
2015/01/29 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python机器学习之神经网络(二)
2017/12/20 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python如何读取、写入CSV数据
2020/07/28 Python
django使用channels实现通信的示例
2020/10/19 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
服装创业计划书范文
2014/02/05 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
走进敬老院活动总结
2014/07/10 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书