JavaScript常見事件對象與操作實例總結

2024-05-06 15:43:32

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript常見事件對象與操作。分享給大家供大家參考，具體如下：

觸發 DOM 上的事件時，會生成一個事件對象 event，它包含著所有與事件有關的信息，諸如導致事件的元素、事件的類型以及其他與特定事件相關的信息。所有的瀏覽器都支持 event 對象，但支持的方式不同。

1 DOM 中的事件對象

兼容 DOM 的瀏覽器會將 event 對象傳入事件處理程序（DOM0 級與 DOM2 級都支持）：

var btn = document.getElementById("myBtn");btn.onclick = function (event) {  console.log(event.type);//"click"};btn.addEventListener("click",function(event){  console.log(event.type);//"click",false};

event.type 保存的是被觸發的事件類型。

通過 HTML 屬性指定事件處理程序時， event 中保存的是 event 對象：

<input type="button" value="Click Me" onclick="alert(event.type)"/>

event 對象包含著創建它的特定事件相關的屬性和方法，所以可能每個特定事件都有自己所特有的屬性和方法，不過所有事件都會有這些屬性和方法：

屬性/方法	類型	讀/寫	說明
bubbles	Boolean	只讀	事件是否冒泡。
cancelable	Boolean	只讀	是否可以取消事件的默認行為。
currentTarget	Element	只讀	與當前事件處理程序相關的元素。
defaultPrevented	Boolean	只讀	true 表示已調用 preventDefault() 方法（DOM3 新增）。
detail	Integer	只讀	與事件相關的細節信息。
eventPhase	Integer	只讀	調用事件處理程序的階段；1：捕獲；2：處于目標；3：冒泡。
preventDefault()	Function	只讀	取消事件的默認行為（如果 cancelable 為 true，就可以調用這個方法）。
stopImmediatePropagation()	Function	只讀	阻止事件被進一步捕獲或者冒泡，同時阻止任何事件處理程序被調用（DOM3 新增）。
stopPropagation()	Function	只讀	阻止事件被進一步捕獲或者冒泡（如果 bubbles 為 true，就可以調用這個方法）。
target	Element	只讀	事件的目標。
trusted	Boolean	只讀	true：事件是由瀏覽器生成的；false：事件是通過 JavaScript 創建的（DOM3 新增）。
type	String	只讀	被觸發的事件類型。
view	AbstractView	只讀	與事件相關的抽象視圖，相當于發生事件的 window 對象。