如何將事件作為參數傳遞給 JavaScript 的內聯事件處理程序？

// this e works
document.getElementById("p").oncontextmenu = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
};

// this e is undefined
function doSomething(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

<p id="p" onclick="doSomething(e)">
  <a href="#">foo</a>
  <span>bar</span>
</p>

已經有人問過一些類似的問題。

但在我的程式碼中，我正在嘗試獲取被點擊的子元素，例如 a 或 span。

那麼正確的方式是如何將 event 作為參數傳遞給事件處理器，或者如何在不傳遞參數的情況下在處理器內獲取事件呢？

編輯

我知道 addEventListener 和 jQuery，請提供將事件傳遞給 inline 事件處理器的解決方案。

答案＃1

傳遞 event 物件：

<p id="p" onclick="doSomething(event)">

獲取被點擊的子 元素（應與 事件 參數一起使用：

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

傳遞 element 本身（DOMElement）:

<p id="p" onclick="doThing(this)">

在 jsFiddle 上查看實時範例。

您可以像上面那樣指定 event 的名稱，但您的處理程序也可以如這裡所述訪問 event 參數：「當事件處理程序被指定為 HTML 屬性時，指定的代碼會被包裝到具有以下參數的函數中」。該鏈接中還有更多的附加文檔。

答案＃2

你不需要傳遞 this，因為已經有預設自動傳遞的 event 物件，其中包含 event.target，它擁有事件來源的物件。你可以簡化你的語法：

這個：

<p onclick="doSomething()">

將與此一起使用：

function doSomething(){
  console.log(event);
  console.log(event.target);
}

你不需要實例化 event 物件，它已經存在。試試看。而 event.target 將包含呼叫它的整個物件，這在之前你引用為「this」的就是它。

現在，如果你在程式碼的某個地方動態觸發 doSomething()，你會注意到 event 是未定義的。這是因為它並不是由點擊事件觸發的。所以如果你仍然想要人工觸發這個事件，只需使用 dispatchEvent：

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

然後 doSomething() 將會像平常一樣看到 event 和 event.target！

不需要到處傳遞 this，你可以保持函數簽名不包含連線資訊，並簡化事務。

更新 2022-10-30:

我已經聯繫過 WHATWG 的某人，另一種可行的方法如下，雖然一些 IDE 會報告它為「過時」，但它並非如此。你可以在呼叫者的參數列表中傳遞「event」關鍵字（小寫 e），在任何位置，並如此使用它。

下面可以這樣做，a、b、c 和 d 是額外的參數，如果有的話，可以用來示範順序並不重要：

<p onclick="doSomething(a,b,event,c,d)">

在你的函數定義中，你會相應地捕捉它：

function doSomething(arg1, arg2, arg3, arg4, arg5){} //arg3 would contain the event

並存取通常的屬性，在這個例子中，由於我們用 arg3 連接了事件：

console.log(arg3.target)

答案＃3

由於內聯事件是作為函數執行的，你可以簡單地使用 arguments。

<p id="p" onclick="doSomething.apply(this, arguments)">

和

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

在被接受的回答中提到的「event」實際上是傳給函數的參數名稱。它與全局事件沒有任何關係。