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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 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实现取得HTTP请求的原文
2014/08/18 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
理解JS绑定事件
2016/01/19 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
用JS实现简单的登录验证功能
2017/07/28 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python PIL图片添加字体的例子
2019/08/22 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
音乐器材管理制度
2014/01/31 职场文书
仓库统计员岗位职责
2015/04/14 职场文书