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中暂停功能的实现代码
Mar 04 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
javascript实现弹出层效果
Dec 10 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP文件操作方法汇总
2015/07/01 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
React中jquery引用的实现方法
2017/09/12 jQuery
微信小程序实现购物页面左右联动
2019/02/15 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
文科生自我鉴定
2014/02/15 职场文书
出纳会计岗位职责
2014/03/12 职场文书
师德演讲稿范文
2014/05/06 职场文书
就业推荐表导师评语
2014/12/31 职场文书
免职通知
2015/04/23 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
协议书格式模板
2016/03/24 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
在Python 中将类对象序列化为JSON
2022/04/06 Python