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 each()小议
Mar 18 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 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
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python Socket使用实例
2017/12/18 Python
Python遍历numpy数组的实例
2018/04/04 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
家属慰问信
2015/02/14 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Python内置数据结构列表与元组示例详解
2021/08/04 Python