JavaScript事件對象event用法分析

更新時間：2018年07月27日 10:28:58 作者：筱葭

這篇文章主要介紹了JavaScript事件對象event用法,結(jié)合實例形式分析了事件對象event中常用的屬性、方法、相關(guān)操作技巧與注意事項,需要的朋友可以參考下

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

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

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

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

1、DOM中的事件對象

屬性/方法	類型	說明
bubbles	Boolean	表明事件是否冒泡
cancelabel	Boolean	表明是否可以取消事件的默認行為
currentTarget	Element	事件處理程序當前正在處理事件的那個元素（監(jiān)聽事件的那個元素）
defaultPrevented	Boolean	true表示已經(jīng)調(diào)用了preventDefault()
detail	Integer	與事件相關(guān)的細節(jié)信息
eventPhase	Integer	調(diào)用事件處理程序的階段：1表示捕獲階段，2表示處于目標，3表示冒泡階段
preventDefault()	Function	取消事件的默認行為，cancelable為true才可使用此方法
stopImmediatePropagation()	Function	取消事件的捕獲或冒泡，同時阻止任何事件處理程序被調(diào)用
stopPropagation()	Function	取消事件的捕獲或冒泡，bubbles為true才可使用此方法
target	Element	事件的目標
trusted	Boolean	true表示事件是瀏覽器生成的，false表示事件是由開發(fā)人員通過JavaScript創(chuàng)建的
type	String	事件的類型
view	AbstractView	與事件關(guān)聯(lián)的抽象視圖，等同于發(fā)生事件的window對象

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

在需要通過一個函數(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級方法添加事件處理程序時，通過window.event訪問event對象；

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

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

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

屬性/方法	類型	說明
cancelBubble	Boolean	默認為false，但將其設(shè)置為true就可以取消事件冒泡，由于IE不支持事件捕獲，因此只能取消事件冒泡，而stopPropagation()則可以同時取消事件捕獲或冒泡
returnValue	Boolean	默認為true，但將其設(shè)置為false就可以取消事件的默認行為
srcElement	Element	事件的目標
type	String	事件的類型

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：關(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錯誤與調(diào)試技巧總結(jié)》

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

您可能感興趣的文章: