事件对象

最新推荐文章于 2024-02-01 09:19:56 发布

转载最新推荐文章于 2024-02-01 09:19:56 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lmjZone/p/7737636.html

本文深入解析了DOM事件的工作原理，包括事件对象的属性和方法，如type、preventDefault()和stopPropagation()，以及如何在不同浏览器中正确处理这些事件。

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息：导致事件的元素、事件的类型、其他与特定事件相关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象。如下：

var btn = document.getElementById("myBtn")
//DOM0
btn.onclick = function(event){
      alert(event.type);  //"click"    
}
//DOM2
btn.addEventListener("click",function(event){
      alert(event.type);//"click
},false);

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

在需要通过一个函数处理多个事件时，可以使用type属性。如下：

    var btn=document.getElementById("myBtn");
        var handler=function(event){
            switch(event.type){
                case "click":
                alert("Clicked");
                break;
    
                case "mouseover":
                event.target.style.backgroundColor="red";
                break;
    
                case "mouseout":
                event.target.style.backgroundColor="";
                break;
            }
        };
        btn.onclick=handler;
        btn.onmouseover=handler;
        btn.onmouseout=handler;

要阻止特定事件的默认行为，可以使用preventDefault()方法：例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它。
```
var link=document.getElementById("myLink");
     link.onclick=function(event){
         event.preventDefault();
     }
```

　　　　只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。

stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

    var btn=document.getElementById("myBtn");
        btn.onclick=function(event){
            alert("Clicked");
            event.stopPropagation();//去掉该句会出现两个警告框，先是clicked，再是Body clicked。
        };
        document.body.onclick=function(event){
            alert("Body clicked");
        };

　　对于这个例子而言，因为调用了stopPropagation(),所以在单价按钮时click事件不会传播到document.body。

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段：在捕获阶段调用事件处理程序，eventPhase等于1；如果事件处理程序处于目标对象上，eventPhase等于2；如果在冒泡阶段调用事件处理程序，eventPhase等于3.注意，尽管“处于目标”发生在冒泡阶段，但eventPhase仍等于2.
```
var btn=document.getElementById("myBtn");
    btn.onclick=function(event){
        alert(event.eventPhase);  //2
    };
    document.body.addEventListener("click",function(event){
        alert(event.eventPhase);   //1
    },true);
    document.body.onclick=function(event){
        alert(event.eventPhase);   //3
    };
```
当单击按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到document.body中的那一个，所以会先弹出表示eventPhase的1 。接着会触发按钮上注册的事件处理程序，此时的eventPhase的值为2。最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到document.body上的那一个，显示的值是3。当eventPhase的值为2时，this、target、和currentTarget始终是相等的。

IE中的事件对象

要访问IE中的event对象，取决于指定事件处理程序的方法。

在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

var btn=document.getElementById("myBtn");
        btn.onclick=function(){
            var event=widnow.event;
            alert(event.type);  //"click"
        };

如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中去。
```
 var btn=document.getElementById("myBtn");
        btn.attachEvent("onclick",function(event){
          alert(event.type);     //"click"
        });
```
在像这样使用attachEvent（）的情况下，也可以通过window对象来访问event对象。

如果是通过HTML特性指定的事件处理程序，还可以通过一个名叫event的变量来访问event对象，如下：
```
<input type="button" value="Click Me" onclick="alert(event.type)" >
```

IE事件对象会包含下表所列的属性和方法

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标，最好使用event.srcElement比较保险。

var btn=document.getElementById("myBtn");
        btn.onclick=function(){
            alert(window.event.srcElement===this);   //true
        };
        btn.attachEvent("onclick",function(event){
          alert(event.srcElement===this);     //false
        });

returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false，就可以阻止默认行为。

cancelBubble属性：

跨浏览器的事件对象

var EventUtil={
        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;
            }
        }，
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },

        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            } else if(element.detchaEvent){
                element.detchaEvent("on"+type,handler);
            } else{
                element["on"+type]=null;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    };