好好学一遍JavaScript 笔记(十)——IE跟DOM事件函数区别
欢迎技术交流。 QQ：138986722
1、获取目标
位于事件中心的对象称为目标(target).假设为<div/>元素分配onclick事件处理函数、触发click事件时、<div/>就被认为是目标。IE、目标包含在event对象的srcElement属性中：
var oTarget = oEvent.srcElement;在DOM兼容的浏览器中、目标包含在target属性中：
var oTarget = oEvent.target;示例：
<div id="divId" onclick="testFunction(event)">点击 </div>
<script type="text/javascript" >
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
var isMoz = sUserAgent.indexOf("Gecko") > -1;
function testFunction(oEvent){
if(isIE){
alert("IE");
var oEvent = window.event;
//IE、目标包含在event对象的srcElement属性中：
var oTarget = oEvent.srcElement;
alert(oTarget.innerText);
return;
}
if(isMoz){
alert("火狐: "+oEvent);
/**
*
* 直接innerText这样火狐不支持、它支持innerHTML
* 所以要用innerText需要处理一下.
*
* 让火狐兼容innerText**/
HTMLElement.prototype.__defineGetter__("innerText",
function ()
{
var anyString = "";
var childS = this.childNodes;
for (var i = 0; i < childS.length; i++)
{
if (childS[i].nodeType == 1)
anyString += childS[i].tagName == "BR"
? "\r\n" : childS[i].textContent;
else if (childS[i].nodeType == 3)
anyString += childS[i].nodeValue;
}
return anyString;
});
HTMLElement.prototype.__defineSetter__("innerText",
function (sText)
{
this.textContent = sText;
});
/**end**/
//在DOM兼容的浏览器中、目标包含在target属性中：
var oTarget = oEvent.target;
alert(oTarget.innerText);
return;
}
}
</script>2、阻止某个事件的默认行为IE必须将returnValue属性设值为false:
oEvent.returnValue = false;而在Mozilla中、只要调用preventDefault()方法:
oEvent.preventDefault();用户右击页面时、阻止他使用菜单。只要阻止contextmenu事件的默认行为就可以了：
doucment.body.oncontextmenu = function (oEvent){
if(isIE){
oEvent = window.event;
oEvent.returnValue = false;
}else{
oEvent.preventDefault();
}
};3、停止事件复制(冒泡)
IE中、要阻止事件进一步冒泡、必须设置cancelBubble属性为true:
oEvent.cancelBubble = true;在Mozilla中、只需调用stopPropagation()方法：
oEvent.stopPropagation();停止事件复制可以阻止事件流中的其它对象的事件处理函数执行、点击下面button按钮会弹出input、body、html这是因为事件先从input元素冒泡到body、然后到html ：
<html onclick="alert('html');">
<head>
<title>停止事件复制(冒泡)</title>
</head>
<body onclick="alert('body');">
<input type="button" onclick="alert('input');" value="点击" />
</body>
</html>下面就在按钮上停止复制(冒泡)：<html onclick="alert('html');">
<head>
<title>停止事件复制(冒泡)</title>
<script type="text/javascript">
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
function testClick(oEvent){
alert("input");
if(isIE){
var oEvent = window.event;
oEvent.cancelBubble = true;
}else{
oEvent.stopPropagation();
}
}
</script>
</head>
<body onclick="alert('body');">
<input type="button" onclick="testClick(event);" value="点击" />
<br />
</body>
</html>