js event事件的传递与冒泡处理
作者:bea
代码如下: <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=
代码如下:
<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 setTimeout和setInterval 的区别
- javascript OFFICE控件测试代码
- JavaScript Cookie 直接浏览网站分网址
- JavaScript Cookie显示用户上次访问的时间和次数
- JavaScript 利用Cookie记录用户登录信息
- JavaScript Cookie的读取和写入函数
- jquery 双色表格实现代码
- javascript检测(控制 )上传文件大小
- IE浏览器打印的页眉页脚设置解决方法
- jQuery Selectors(选择器)的使用(六、属性篇)
- JQuery 表单中textarea字数限制实现代码
- 测试JavaScript字符串处理性能的代码
- javascript 混合的构造函数和原型方式,动态原型方式
- JavaScript 常见对象类创建代码与优缺点分析
- javascript prototype原型操作笔记
- javascript 面向对象的经典实例代码
- javascript Array.sort() 跨浏览器下需要考虑的问题
- IE7中javascript操作CheckBox的checked=true不打勾的解决方法
- 兼容IE,firefox的获取节点的文本值的javascript代码