跨浏览器之事件对象

所以浏览器都支持事件对象,但是支持的方式不同。用的比较多的属性就是:

(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 }

 

posted @ 2017-09-17 13:45  JavaScriptBUG  阅读(212)  评论(0编辑  收藏  举报