如何将事件作为参数传递给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.

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

编辑

我知道addEventListener并且jQuery,请提供一个将事件传递给inline事件处理者的解决方案.

Answer 1

传递event对象:

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

获取单击的子元素(应与event参数一起使用:

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

传递元素本身(DOMElement):

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

在jsFiddle上看到实例

Answer 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到处传递，您可以让您的函数签名不受接线信息的影响并简化事情。

Answer 3

由于内联事件作为函数执行,您可以简单地使用参数.

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

接受的答案中提到的"事件"实际上是传递给函数的参数的名称.它与全球事件无关.