獲取的onmouseover「事件」對象

Question

我曾經有一個內嵌onmouseover()定義和使用的event對象：

<script> 
function foo(e, bar) { 
    var x = e.clientX; 
    var y = e.clientY; 
    // do something with the coordinates and bar 
} 
</script> 
<div onmouseover="foo(event, 'barValue')"></div> 

現在，我通過Java腳本生成的HTML <div>，我可以不知道從哪裏得到我的event對象。

var d = document.createElement("div"); 
d.onmouseover = function() { foo(event, dynamicBarValue); }; 

我不想使用JQuery的解決方案。

Answer 1

您將收到evt作爲聽衆的第一個參數（檢查EventTarget.dispatchEvent()）。所以你可以簡單地這樣做：

var d = document.createElement("div"); 
d.onmouseover = function(evt) { foo(evt, dynamicBarValue); }; 

Answer 2

您正在使用On事件處理程序屬性語法來添加事件。但是，您正試圖通過使用語法
d.onmouseover = function() ...覆蓋事件（屬性）在JS代碼。

您已經指定的事件在HTML屬性
<div onmouseover="foo(event, 'barValue')"></div>這個代碼綁定與mouseover事件的函數foo。當您嘗試在JS文件中再次添加d.onmouseover事件時，它將覆蓋該屬性併爲您的事件創建一個新的處理程序。

所以，您只需要在或的HTML代碼或JS代碼中定義屬性。

此外，第一個參數是事件信息。

從MDN，

當事件處理程序被指定爲HTML屬性，則 指定的代碼被包裝成一個函數具有以下 參數：

事件 - 對於所有事件處理程序，除了錯誤。
事件，來源，lineno， colno和onerror事件處理程序的錯誤。請注意，事件 參數實際上包含錯誤消息作爲字符串。

因此，只需定義一個事件處理程序即可達到預期的效果。

function foo(e, bar) { 
 
    var x = e.clientX; 
 
    var y = e.clientY; 
 
    // do something with the coordinates and bar 
 
    console.log(x,y,bar) 
 
}

<div onmouseover="foo(event, 'barValue')">Test</div>