Code
<style>
.floatDiv {
position:absolute; top:30px; left:30px; width:30px; height:30px; background-color:#00FFFF;
}
</style>
<script type="text/javascript">
function fn1(evt){
var obj = evt.currentTarget || evt.srcElement; //get DOMObj
var text = '<div class=\"floatDiv\" onmouseover=\"fn2(event)\" >';
text=text +'</div>';
obj.innerHTML= text;
//阻止事件起泡
if (evt.stopPropagation) evt.stopPropagation(); //DOM 2
else {evt.cancelBubble = true;} //IE
//禁止执行默认动作
if(evt.preventDefault) evt.preventDefault(); //DOM 2
else {evt.returnValue = false;} //IE
}
//fn2 设定为自动生成的div的onmouseover实际，并阻止该事件起泡，避免在IE下onmouseover事件
//起泡，并执行其父容器div0的事件函数fn1;
function fn2(evt){
//阻止事件起泡
if (evt.stopPropagation) evt.stopPropagation();//DOM 2
else {evt.cancelBubble = true;} //IE
//禁止执行默认动作
if(evt.preventDefault) evt.preventDefault(); //DOM 2
else {evt.returnValue = false;} //IE
}
</script>
<body>
<div id="div0" name="div0Name" style="border:#FF0000 solid 1px;width:100px;height:100px; position:relative;" onmouseover="fn1(event)">
</div>
</body>
以上代码展示了如何获取事件的dom对象，已经如何防止事件起泡，兼容ie6 7 ,firefox 3
Tag标签: 事件 dom对象 事件起泡
