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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
php include,include_once,require,require_once
2008/09/05 PHP
php实现的http请求封装示例
2016/11/08 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
js获取当前路径的简单示例代码
2014/01/08 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python numpy数组转置与轴变换
2019/11/15 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python猴子补丁知识点总结
2020/01/05 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
护理专科毕业推荐信
2013/11/10 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
大课间体育活动方案
2014/03/12 职场文书
董事长助理工作职责
2014/06/08 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
标准毕业生自荐信
2014/06/24 职场文书
管理工程专业求职信
2014/08/10 职场文书
超强台风观后感
2015/06/09 职场文书
小学运动会加油词
2015/07/18 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
对讲机的最大通讯距离是多少
2022/02/18 无线电