JavaScript事件對象event用法分析

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

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

下面繼續介紹JavaScript的事件對象event。

事件對象event包含導致事件的元素、事件的類型以及其他與特定事件相關的信息。

1、DOM中的事件對象

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

在需要通過一個函數處理多個事件時，可以使用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;

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

2、IE中的事件對象

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

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

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

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

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

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); // 輸出：click
}

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

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。