跨浏览器之事件对象
所以浏览器都支持事件对象,但是支持的方式不同。用的比较多的属性就是:
(1)阻止冒泡事件。
(2)阻止默认事件。
(3)get事件的目标。
1.DOM中的事件对象
在DOM中,无论是在DOM0级还是DOM2级中,也不论什么方法,都会传入一个event对象。
在DOM中,阻止冒泡事件用的是event下的stopPropagation()方法。阻止默认事件用的是preventDefault()。get事件的目标是用的event下的target属性。
2.IE中的事件对象
在IE中事件对象是在window下的,用window.event来使用。
阻止冒泡事件用的是cancelBubble属性来控制,默认为false,设置为true可以阻止冒泡事件。阻止默认事件用的是returnValue,默认为true,设置为false可以阻止。get事件的目标是用的window.event下的srcElement属性。
综合以上,可以整合出跨浏览器使用事件对象的函数:
1 var eventMethod = { 2 getEvent : function(event){//get事件对象 3 return event ? event : window.event; 4 } 5 getTarget : function(event){//get事件的目标 6 return event.target ? event.target : window.event.srcElement; 7 } 8 preventDefault : function(event){//阻止默认事件 9 if(event.preventDefault){ 10 event.preventDefault(); 11 }else{ 12 window.event.returnValue = false; 13 } 14 } 15 stopPropagetion : function(event){//停止冒泡事件 16 if(event.stopPropagation){ 17 event.stopPropagation(); 18 }else{ 19 window.event.cancelBubble = true; 20 } 21 } 22 }
通过以上对象,就可以在每个浏览器中放心大胆的使用事件的对象了:
1 oA.onclick = function(event){ 2 eventMethod.getEvent(event); 3 }