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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
vue的全局提示框组件实例代码
Feb 26 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
vue设置一开始进入的页面教程
Oct 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php多任务程序实例解析
2014/07/19 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python实现线程池的方法
2015/06/30 Python
pandas 选择某几列的方法
2018/07/03 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
python3中rank函数的用法
2019/11/27 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python面试题集
2012/03/08 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
自考生自我鉴定范文
2013/10/01 职场文书
法律进机关实施方案
2014/03/12 职场文书
公司联欢会策划方案
2014/05/19 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
教师党员整改措施
2014/10/24 职场文书
长城导游词300字
2015/01/30 职场文书