JavaScript中的事件对象

JavaScript中的事件对象

 　 JavaScript中的事件对象是非常重要的，恐怕是我们在项目中使用的最多的了。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。下面将会讲到DOM中的事件对象、IE中的事件对象以及跨浏览器的事件对象三个部分。

　　对于事件处理程序，大家可以看我的博文《JavaScript中的五种事件处理程序》。

 

第一部分：DOM事件对象

　　兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论是HMTL特性、DOM0级还是DOM2级，都会传入这个event对象。这个对象具有下面的属性和方法。

　　DOM事件对象的属性有：

• bubbles  布尔值 只读 表明事件是否冒泡

• cancelable 布尔值 只读 表明是否可以取消事件的默认行为

• currentTarget  元素 只读  表明事件处理程序正在处理的元素

• defaultPrevented 布尔值 只读 表明是否调用了preventDefault()方法

• detail 数值 只读 表明与事件相关的细节信息

• eventPhase  数值 只读  表明事件处理程序的阶段：1为捕获阶段，2为处于目标阶段，3为冒泡阶段

• target  元素 只读 事件的目标

• trusted  布尔值  只读  true表示事件为浏览器生成，false表示开发人员通过js创建

• type  字符串  只读  表明被触发事件的类型

 

　　DOM事件对象的方法有：

• preventDefault()   只读 用来取消事件的默认行为

• stopPropagation()  取消事件的冒泡

• stopImmediatePropagation() 取消事件的捕获或者冒泡（DOM3级新增方法）

 

　　下面举例说明上述几个属性和方法的使用：

例1：

preventDefault()：此方法可以阻止事件的默认行为，比如，点击a标签，本来应该会跳转到相应的url，但是我们可以使用方法阻止，如下所示:

　　

 View Code

 

 

例2：

实际上，我们也可以不使用event而是在function中传入一个参数来当作event使用（DOM0级和DOM2级都可以），如下所示：

 View Code

 

 

例3：

　　实际上，利用event的type属性结合switch语句我们还可以做更多的事情！

　　比如我们需要在点击按钮、划过按钮和划出按钮时做不同的事情，我们可以这样写（这里使用DOM0级添加事件处理程序，方法一样，事件对象依然是event,也可以传入一个参数，以该参数作为对象）：

    点击我     

这样写当然可以得到想要的效果，但是我们还可以这样写：

    点击我     

这样写的封装性似乎会更好一些！

 

例4

　　html事件处理程序也可以使用event对象，只是这里不存在传入参数的问题了。。如下所示:

    
    
    点我  
    

 

到这就讲完了DOM中的事件对象，那么接下来就要谈谈特立独行的IE了。

 

 

 

 

第二部分：IE中的事件对象

　　DOM中的事件对象时不需要区分我们是通过何种方式来添加事件处理程序的，如DOM0级、DOM2级和HTML事件处理程序，对象都直接使用event即可。而IE中却不是这么简单。

　　我们把IE中的事件对象分为三种情况来讲

• 第一种：DOM0级方法添加事件处理程序时的事件对象

• 第二种：IE事件添加事件处理程序时的事件对象

• 第三种：HTML方法添加事件处理程序时的事件对象

　　 

第一种：DOM0级方法添加事件处理程序的事件对象

　　这时，event对象作为了window对象的一个属性。举例如下：

    
    
    点我  

 

 

第二种：IE事件添加事件处理程序时的事件对象

　　　这时需要有event对象传入事件处理程序函数中，如下所示：

    
    
    点我  

 

这里也可以通过window对象来访问event对象，不过最好还是使用传入参数的方法。

 

 

第三种：HTML事件处理程序中的对象

　　这个方法与DOM中的相同。举例如下：

    
    
    点我  

 

 

另外，IE中的事件对象也有和DOM对象相似的属性和方法，下面的属性和方法是其特有的：

• cancelBubble  布尔值  可读可写  默认值为false，设置为true时可以取消事件的冒泡  与DOM中的stopPropagation()方法的作用类似

• returnValue  布尔值  可读可写  默认值为true，设置为false时我们可以取消事件的默认行为，与DOM中的preventDefault()方法类似
  

• srcElement 元素  只读  事件的目标 ,和DOM中的target属性相同

• type  字符串 只读 即为被触发事件的类型

 

 

 

 

第三部分：跨浏览器的事件对象

　　实际上，这一部分就是兼容前面两者实现对象的跨浏览器。在《探究JavaScript的五种事件处理程序》中用到了EventUtil对象，这里我们可以对之加强。

　　

    
    
    点我  

其中，getEvent返回了event对象的引用，event是一般的对象，window.event时考虑了IE的对象。getTarget方法返回事件的目标。 preventDefault（）方法阻止了事件的默认行为。stopPropagation方法阻止了事件的冒泡。

 

下面举一个简单的例子：

    var button=document.getElementById("button");
    button.onclick=function(){
        event=EventUtil.getEvent(event);//获得对象
        EventUtil.stopPropagation(event); //阻止事件冒泡
        alert("button clicked");  //弹出窗口
    };
    document.body.onclick=function(){
        alert("body clicked");//未弹出窗口，因为阻止了事件冒泡
    };