如何在JavaScript传递事件作为参数内联事件处理程序？

Question

// 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。

那么，将事件作为参数传递给事件处理程序的正确方法是什么，或者如何在不传递参数的情况下在处理程序中获取事件？

我知道addEventListener和jQuery，请提供一个将事件传递给inline事件处理程序的解决方案。




Answer 1

你不需要传递这个，已经有默认自动传递的事件对象，它包含事件。目标，它有它来自的对象。您可以简化语法：

这是：

<p onclick="doSomething()">

将与此配合使用：

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

你不需要实例化事件对象，它已经存在了。试试看。和事件。target将包含调用它的整个对象，您之前将其引用为“this”。

现在，如果从代码中的某个地方动态触发doSomething（），您将注意到事件未定义。这是因为它不是由点击事件触发的。因此，如果仍然想人工触发事件，只需使用dispatchEvent：

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

然后doWhat（）会像往常一样看到事件和event.target！

不需要到处传递this，您可以保持您的函数签名不受布线信息的影响，并简化事情。

Answer 2

由于内联事件是作为函数执行的，因此您可以简单地使用参数。

<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
}

接受答案中提到的“事件”实际上是传递给函数的参数的名称。这与全球事件无关。

Answer 3

要传递事件对象：

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

要获取单击的子元素元素（应与事件参数一起使用：

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

要传递元素本身（doElement），请执行以下操作：

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

请参阅jsFiddle上的实时示例。

您可以指定事件的名称，如上所述，但是您的处理程序也可以访问事件参数，如下所述："当事件处理程序被指定为超文本标记语言属性时，指定的代码被包装到具有以下参数的函数中"。链接上还有更多的留档。