事件的传递 event 冒泡处理
2009-12-06 17:17
411 查看
与Netscape相反,IE中的事件传递方向是从事情发生的对象开始,然后依次由该对象向所在的父节点传递。
<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 => 被单击了!
<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 => 被单击了!
相关文章推荐
- js event事件的传递与冒泡处理
- Android中事件分发处理MotionEvent事件在onInterceptTouchEvent()、onTouchEvent()中的传递顺序【转】
- Qt中事件处理的方法(三种处理方法,四种覆盖event函数,notify函数,event过滤,事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码,它是虚拟保护函数,可改写)
- onInterceptTouchEvent()用于处理事件并改变事件的传递方向。
- js event事件的传递与冒泡处理
- 【Android View】Android中View对触摸事件的处理和传递dispatchTouchEvent、onInterceptTouchEvent
- javscript 冒泡事件处理方法 支持(IE,firefox)
- angularJS如何处理事件冒泡
- qml中关于多个MouseArea之间的事件传递(propagateComposedEvent)
- Android开发:在onTouchEvent中处理任意时间的长按事件
- javascript事件处理机制---事件监听、捕获和冒泡
- 复杂事件处理(Complex Event Processing)--4. 产品介绍TIBCO Business Events
- Android TouchEvent事件传递机制
- 【Java学习笔记】50:DocumentEvent事件的处理
- android onTouchEvent 左右手势滑动事件处理
- 多点触控事件处理 ev.getAction() & MotionEvent.ACTION_MASK
- JavaScript 将事件event作为参数传递,鼠标移动事件
- android 事件处理机制之requestDisallowInterceptTouchEvent
- 利用jQuery的$.event.fix函数统一浏览器event事件处理
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录