1、event的relatedTarget、fromElemen和toElement属性
mouseover和mouseout事件都涉及鼠标指针从一个元素边界移入另一个元素的边界中。而获得鼠标的元素是主要作用对象,可以移入的元素即为相关元素。
relatedTarget属性:
event对象的relatedTarget属性提供了相关元素的信息,该对象只对mouseover事件和mouseout事件有值,其余事件属性值为null,且relatedTarget属性不支持IE浏览器。
它在mouseover事件中表示鼠标来自哪个元素,即鼠标移到某个节点时,他之前所在的节点。
在mouseout事件中表示鼠标去往的那个元素,即鼠标离开某个节点时,它新到的节点。
fromElement属性和toElement属性:
由于在IE中不支持relatedTarget属性,故而他提供了自身的2个属性来记录相关元素的信息。
fromElement在mouseover事件中表示鼠标来自哪个元素。
toElement在mouseout事件中指向鼠标去往的那个元素。
2、event的srcElement和target属性
srcElement和target都可以捕获当前事件作用的对象。
event.srcElement.tagName可以捕获事件作用对象的名称。
在IE浏览器下,event对象有srcElement属性,但没有target属性。
而在火狐等其他浏览器中,有target属性,但是没有srcElement属性。
这两个属性的作用都是一样的只是IE与其他浏览器的区别而已。
3、event和window.event对象
在IE/Opera浏览器中支持window.event作为事件对象,而在火狐等浏览器中事件对象是event。
4、元素的addEventListener方法和attachEvent方法
addEventListener()和attachEvent()都可以一次性添加多个事件。
在IE浏览器中,支持attacEvent(type,fn),不支持捕获。
在火狐等浏览器中,支持addEventListener(type,fn,useCapture)。
注意:参数type表示事件类型,fn表示事件的执行函数,useCapture表示是否捕捉,值为true/false。
在attachEvent方法中type是含on的事件名,例如:onclick。
在addEventListener方法中type是不含on的事件名,例如:click。
5、元素的removeEventListener方法和detachEvent方法
removeEventListener()和detachEvent()都可以移除一个元素的对应事件
在IE浏览器中,支持detachEvent(type,fn),不支持捕获。
在火狐等浏览器中,支持removeEventListener(type,fn,userCapture)。
6.event的cancelBubble属性和stopPropagation方法
cancelBubble和stopPropagation()都可以阻止事件冒泡。
window.event.cancelBubble=true在IE浏览器下有效 。
event.stopPropagation()在Firefox等浏览器下有效 。
7、event的preventDefault方法和returnValue属性
preventDefault()和returnValue都具有取消事件默认行为的作用。
IE浏览器支持:window.event.returnValue=false。
火狐等浏览器支持:event.preventDefault()。
跨浏览器获取相关对象的方法:
var EventUtil = {
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
addHandler: function (element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler:function (element,type,handler){
if(element.removeEventLister){
element.removeEventListener(type, handler, false);
}else if(element.removeEventLister){
element.detachEvent("on" + type, handler);
}else {
element["on" + type] = return false;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
stopEvent:function(event){
if(event.cancelBulle){
event.cancelBubble=true;
}else {
event.stopPropagation();
}
},
stopPrevent:function(event){
if(!window.event.returnValue){
event.preventDefault();
}else{
window.event.returnValue = false;
}
}
};