浏览器间的事件区别

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.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;
	    	}
	    }
	};