JavaScript事件對象event用法分析

本文實(shí)例講述了JavaScript事件對象event用法。分享給大家供大家參考，具體如下：

前面的文章已經(jīng)介紹了JavaScript為事件指定處理程序的五種方式。

下面繼續(xù)介紹JavaScript的事件對象event。

事件對象event包含導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。

1、DOM中的事件對象

若直接將事件處理程序指定給了目標(biāo)元素，則this，currentTarget和target包含相同的值；若事件處理程序存在于按鈕的父節(jié)點(diǎn)中，則this和currentTarget等于父節(jié)點(diǎn)，而target等于按鈕元素。

在需要通過一個(gè)函數(shù)處理多個(gè)事件時(shí)，可以使用type屬性：

var btn = document.getElementsByTagName("button")[0];
var handler = function(event) {
 switch(event.type) {
 case "click":
 alert("click");
 case "mouseover":
 alert("mouseover");
 case "mouseout":
 alert("mouseout");
 }
}
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

注意：只有在事件處理程序執(zhí)行期間，event對象才會存在；一旦事件處理程序執(zhí)行完畢，event對象就會被銷毀。

2、IE中的事件對象

訪問IE中的event對象有幾種不同的方式：

1) 在使用DOM0級方法添加事件處理程序時(shí)，通過window.event訪問event對象；

2) 在使用attachEvent()方法添加事件處理程序時(shí)，event對象會作為參數(shù)被傳入事件處理程序中，也可以通過window.event訪問event對象；

3) 在通過HTML特性指定事件處理程序時(shí)，還可以通過一個(gè)名為event的變量來訪問event對象。

IE中的事件目標(biāo)通過srcElement屬性獲取，this不一定等于事件目標(biāo)：在使用DOM0級方法添加事件處理程序時(shí)，this等于事件目標(biāo)，但在使用attachEvent()方法添加事件處理程序時(shí)，this則不等于事件目標(biāo)。

3、跨瀏覽器的事件

var EventUtil = { 
 addHandler: function(element, type, handler) {
 ......
 }, 
 getEvent: function(event) {
 return event ? event : window.event;
 },
 getTarget: function(event) {
 return enent.target || target.srcElement;
 },
 preventDefault: function(event) {
 if (event.preventDefault)
 event.preventDefault();
 else
 event.returnValue = false;
 },
 removeHandler: function(element, type, handler) {
 ......
 }, 
 stopPropagation: function() {
 if (event.stopPropagation)
 event.stopPropagation();
 else
 event.cancelBubble = true;
 }
};
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 EventUtil.stopPropagation(event);
 alert(event.target.type); // 

PS：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com