How to pass event as argument to an inline event handler in JavaScript?

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

There are some similar questions have been asked.

But in my code, I'm trying to get child elements who's been clicked, like ABC0 or span.

So what is the correct way to pass event as an argument to event handler, or how to get event inside handler without passing an argument?

edit

I'm aware of addEventListener and jQuery, please provide a solution for passing event to inline event hander.

253833 次浏览
小开
最佳答案

传递 event对象:

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

获取被单击的子 element(应该与 event参数一起使用:

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

通过 element本身(DOMElement) :

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

观看 JsFiddle的实况转播。

您可以像上面那样指定 event的名称，但是您的处理程序也可以像描述的 给你那样访问 event参数: “当事件处理程序被指定为 HTML 属性时，指定的代码被包装到具有以下参数的函数中”。在这个链接上还有更多的附加文档。

小开

因为内联事件是作为函数执行的，所以可以简单地使用 争论。

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

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

小开

您不需要传递 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，您可以保持函数签名免于连接信息并简化事情。

2022-10-30更新 :

我已经联系了一些来自 WHATWG 的人，另一种方法是在下面，虽然一些 IDE 的报告说它是“过时的”，但事实并非如此。您可以在调用者的参数列表中的任何位置传递“ event”关键字，并以此方式使用它。它是带有小 e 的事件。

下面的工作，a，b，c 和 d 是额外的参数传递，如果有的话，证明顺序并不重要:

<p onclick="doSomething(a,b,event,c,d)">

在你的函数定义中，你可以相应地捕获它:

function doSomething(arg1, arg2, arg3, arg4, arg5){} //arg3 would contain the event

并访问通常的属性，在本例中，因为我们使用 arg3连接了事件:

console.log(arg3.target)
小开

下面是我如何防止用户将无效字符复制粘贴到输入文本字段:

function validatePaste(el, e) {
var regex = /^[a-z .'-]+$/gi;
var key = e.clipboardData.getData('text')
if (!regex.test(key)) {
e.preventDefault();
return false;
}
}

这个函数位于 <script>标记中，它被调用为:

<input type="text" onpaste="validatePaste(event)">

提交答案