javascript event 對象（事件對象）

zilu 發布于2019-08-26 12:18 / 3388人閱讀

摘要：什么是事件對象在觸發上的某個事件時，會產生一個事件對象。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。鍵盤操作導致的事件對象中，會包含按下的鍵有關的信息。取消默認行為，取消右鍵菜單阻止默認事件環境菜單，上下文菜單

什么是事件對象？

在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含著所有與事件有關的信息。
包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。

比如：
鼠標操作導致的事件對象中，會包含鼠標位置的信息。
鍵盤操作導致的事件對象中，會包含按下的鍵有關的信息。
下面我們點擊document看看event包含哪些東西。

event對象的兼容寫法

event事件對象不能兼容所有的瀏覽器，我們一般是采用下面這種方式進行兼容。

var oEvent=ev || event;

如果參數不是ev而是event的時候，兼容方式也可以寫成下面這種格式。

document.onclick=function(event){
  var oEvent=event || window.event;
  console.log(oEvent);
}

測試代碼如下：



  
    event兼容測試

event常用屬性有哪些

oEvent.type;——獲取綁定的事件類型，比如click，mouseover等

oEvent.target;（在ie低版本中用event.srcElement）——返回觸發事件的元素。比如[object HTMLInputElement]指的是html里的input元素

oEvent.currentTarget;（ie低版本中不存在）表示當前所綁定事件的元素，跟target的區別看下面



  
    event.target和event.currentTarget的區別

oEvent.stopPropagation()[?pr?p?"ɡe??n];（在ie中用oEvent.cancelBubble=false）//用于阻止事件冒泡

oEvent.stopImmediatePropagation();//Immediate[??mi:di?t] //當一個元素綁定多個事件處理程序的時候，事件會按照順序全部執行，如果不想讓后面的事件處理程序執行，就在當前事件里加這個方法，就不執行后面的事件處理程序了。

oEvent.preventDefault();（在ie低版本中用oEvent.returnValue=true）//阻止事件的默認行為，比如阻止a的href鏈接。在智能設講用return false。



  
    仿select下拉框、阻止默認動作、阻止默認行為
    
    
  
  
    
    
    a鏈接

oEvent.clientX;鼠標的橫坐標。

oEvent.clientY;鼠標的縱坐標。

阻止默認事件

普通事件是沒有返回值的，在事件中我們可以通過return false來阻止默認事件。下面我們在右鍵菜單中通過return false阻止彈出右鍵菜單。
我們在某個動作里用return false告訴瀏覽器，不用你幫忙了，我們自己處理。比如下面的代碼我們在oncontextmenu右鍵菜單事件里return false告訴瀏覽器，我不需要默認的菜單了，如果我們需要一個自定義菜單，我們可以return false默認菜單然后自己定義自己的菜單。



  
    return false取消默認行為，取消右鍵菜單
    
  
  
    oncontextmenu環境菜單，上下文菜單

云服務器 GPU云服務器火狐獲取event對象事件對象 IE事件對象 js事件對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108453.html

聊聊DOM中很重要的一個知識點：事件

摘要：事件事件就是瀏覽器告知程序，用戶的行為，用戶點擊了頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的類型事件根據使用的場景不同，可以分為如下幾種依賴于設備的輸入事件鍵盤事件和鼠標事件，這些事件都是直接和設備相關的獨立于設備的輸事件事件就是瀏覽器告知JavaScript程序，用戶的行為，用戶點擊了HTML頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的...

church 2019-08-23 11:42 評論0 收藏0
《JavaScript 闖關記》之事件

摘要：事件捕獲團隊提出的另一種事件流叫做事件捕獲。所有節點中都包含這兩個方法，并且它們都接受個參數要處理的事件名作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。 JavaScript 程序采用了異步事件驅動編程模型。在這種程序設計風格下，當文檔、瀏覽器、元素或與之相關的對象發生某些有趣的事情時，Web 瀏覽器...

ConardLi 2019-08-22 10:44 評論0 收藏0
JavaScript 筆記 —— 標準事件對象與 IE 事件對象

摘要：另外，標準事件對象還有一個屬性，該屬性在事件處理函數當中始終與相等，而屬性則是指向事件觸發的具體目標。取消事件默認行為有如下的標準事件對象使用的方法取消事件默認行為。而在標準事件綁定當中，的值等于被綁定的元素。標準的事件綁定函數是 addEventListener 函數，而 IE 瀏覽器（IE9 以下）則是用 attachEvent。這兩個函數中的事件處理函數都可以傳入一個 eve...

animabear 2019-08-21 10:24 評論0 收藏0
<<編寫可維護的javascript>> 筆記7(事件處理)

摘要：在所有應用中事件處理都是非常重要的所有的均通過事件綁定到上所以大多數前端工程師需要花費很多時間來編寫和修改事件處理程序遺憾的是在誕生之初這部分內容并未受太多重視甚至當開發者們開始熱衷于將傳統的軟件架構概念融入到里時事件綁定仍然沒有收到多大重在所有JavaScript應用中事件處理都是非常重要的. 所有的JavaScript均通過事件綁定到UI上, 所以大多數前端工程師需要花費很多時間...

microelec 2019-08-21 17:10 評論0 收藏0
JavaScript學習總結（九）事件詳解

摘要：布爾值表示捕獲階段調用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調函數。對象會被作為第一個參數傳遞給事件監聽的回調函數。布爾默認值是，當設置成時用以取消事件的默認行為與中的相同。其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當時寫了一大堆，結果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學習總結做...

LiveVideoStack 2019-08-21 10:21 評論0 收藏0
JavaScript系列之事件詳解

摘要：響應某個事件的函數就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果，解決事件處理程序過多問題。事件委托優點提高性能。 JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門事件 JavaScript與HTML之間的交互是通過事件實現的...

pakolagij 2019-08-21 17:16 評論0 收藏0