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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
Vue声明式渲染详解
May 17 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
跟老齐学Python之开始真正编程
2014/09/12 Python
详解Python中dict与set的使用
2015/08/10 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
七年级地理教学反思
2014/01/26 职场文书
市场营销工作计划书
2014/09/15 职场文书
护士医德医风自我评价
2014/09/15 职场文书
后勤工作个人总结
2015/02/28 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
女方离婚起诉书
2015/05/18 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript