js event事件的传递与冒泡处理
时间:2021-07-24 09:34:42|栏目:JavaScript代码|点击: 次
复制代码 代码如下:
<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代码
下一篇:ajax初级教程之获取博文列表
本文标题:js event事件的传递与冒泡处理
本文地址:http://www.codeinn.net/misctech/160836.html