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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
jQuery实现计算器功能
Oct 19 jQuery
ztree+ajax实现文件树下载功能
May 18 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
家长会学生家长演讲稿
2013/12/29 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
客户表扬信范文
2014/01/10 职场文书
大学校庆邀请函
2014/01/11 职场文书
领导检查欢迎词
2014/01/14 职场文书
物业经理自我鉴定
2014/03/03 职场文书
房屋转让协议书
2014/04/11 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2015年党性分析材料
2014/12/19 职场文书
道歉情书大全
2015/05/12 职场文书
丧事主持词
2015/07/02 职场文书
2019年思想汇报
2019/06/20 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书