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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序实现日历功能
Nov 27 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
Vue SPA 首屏优化方案
Feb 26 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python如何将函数值赋给变量
2020/04/28 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
医生自荐信
2013/10/11 职场文书
个人简历自荐信
2013/12/05 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
学生退学证明
2015/06/23 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python