如何将事件作为参数传递给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) {&nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; var target = e.target || e.srcElement;&nbsp; &nbsp; console.log(target);}传递元素本身（DOMElement）：<p id="p" onclick="doThing(this);">请参阅jsFiddle上的实时示例

Answer 2

由于内联事件作为函数执行，因此您可以简单地使用arguments。<p id="p" onclick="doSomething.apply(this, arguments)">和function doSomething(e) {&nbsp; if (!e) e = window.event;&nbsp; // 'e' is the event.&nbsp; // 'this' is the P element}接受的答案中提到的“事件”实际上是传递给函数的参数的名称。它与全球事件无关。

Answer 3

您不需要通过，默认情况下this已经event自动event.target存在一个对象，其中包含它来自哪个对象。您可以简化语法：这个：<p onclick="doSomething()">将与此一起工作：function doSomething(){&nbsp; console.log(event);&nbsp; 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任何地方，并且可以使函数签名免于布线信息并简化操作。