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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
js读取注册表的键值示例
Sep 25 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
JS实现可控制的进度条
Mar 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初学者的8点有效建议
2010/11/20 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
wxPython事件驱动实例详解
2014/09/28 Python
Python选课系统开发程序
2016/09/02 Python
flask入门之表单的实现
2018/07/18 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python实现文字版扫雷
2020/04/24 Python
Python tkinter实现日期选择器
2021/02/22 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
学习十八大报告感言
2014/02/28 职场文书
高中学生自我评价范文
2014/09/23 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
先进个人评语大全
2015/01/04 职场文书
九年级化学教学反思
2016/02/22 职场文书
react国际化react-intl的使用
2021/05/06 Javascript