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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
使用python生成目录树
2018/03/29 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Linux下python制作名片示例
2018/07/20 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
2014年元旦感言
2014/03/06 职场文书
小学节能减排倡议书
2014/05/15 职场文书
美术课外活动总结
2014/07/08 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript