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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 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 base64编码后解码乱码的解决办法
2014/06/19 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
Seajs的学习笔记
2014/03/04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
在python image 中实现安装中文字体
2020/05/16 Python
python属于跨平台语言码
2020/06/09 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
财务经理的岗位职责
2013/12/17 职场文书
企业宗旨标语
2014/06/10 职场文书
应届大专生自荐书
2014/06/16 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Golang数据类型和相互转换
2022/04/12 Golang