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 相关文章推荐
用JavaScript修改CSS属性的代码
May 06 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
js的三种继承方式详解
2017/01/21 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python自动发微信监控报警
2019/09/06 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
事业单位辞职信范文
2014/01/19 职场文书
精彩广告词大全
2014/03/19 职场文书
安全生产承诺书
2014/03/26 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
团支部建设方案
2014/05/02 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫