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.validate使用攻略 第二部
Jul 01 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
简单了解Django模板的使用
2017/12/20 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python 命令行传入参数实现解析
2019/08/30 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
结构和类有什么异同
2012/07/16 面试题
信息管理员岗位职责
2013/12/01 职场文书
创新比赛获奖感言
2014/02/13 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB