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打开图片另存为对话框实现代码
Dec 26 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
js动态为代码着色显示行号
May 29 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python中__call__用法实例
2014/08/29 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
类和结构的区别
2012/08/15 面试题
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS