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脚本生成<div> html，我无法确定从哪里获取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

您正在使用事件处理程序属性语法来添加事件。但是，您尝试使用语法
<强>>覆盖 JS代码中的事件（Property） d.onmouseover = function() ...。

您已在HTML属性中指定了事件
<div onmouseover="foo(event, 'barValue')"></div>此代码将函数foo与mouseover事件绑定在一起。当您尝试在JS文件中再次添加d.onmouseover事件时，它将覆盖该属性并为您的事件创建一个新的处理程序。

因此，您只需要在 HTML代码或JS代码中定义属性。

此外，第一个参数是事件信息。

来自MDN，

当事件处理程序被指定为HTML属性时，   指定的代码被包装到具有以下功能的函数中   参数：

事件 - 适用于所有事件处理程序，但错误除外。
  事件，来源，lineno，   colno，以及onerror事件处理程序的错误。请注意该事件   参数实际上包含错误消息为字符串。

因此，只需定义一个事件处理程序即可达到预期的效果。

＆＃13;

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

＆＃13;

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

＆＃13;

获取onmouseover＆＃39; event＆＃39;从javascript里面设置函数时的对象

2 个答案: