如何将事件作为参数传递给 JavaScript 中的内联事件处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16404327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass event as argument to an inline event handler in JavaScript?
提问by user1643156
// 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 aor span.
但是在我的代码中，我试图获取被单击的子元素，例如a或span。
So what is the correct way to pass eventas an argument to event handler, or how to get event inside handler without passing an argument?
那么event作为参数传递给事件处理程序的正确方法是什么，或者如何在不传递参数的情况下在处理程序中获取事件？
edit
编辑
I'm aware of addEventListenerand jQuery, please provide a solution for passing event to inlineevent hander.
我知道addEventListener并且jQuery，请提供将事件传递给inline事件处理程序的解决方案。
回答by Akram Berkawy
to pass the eventobject:
传递event对象：
<p id="p" onclick="doSomething(event)">
to get the clicked child element(should be used with eventparameter:
获取点击的孩子element（应该与event参数一起使用：
function doSomething(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
to pass the elementitself (DOMElement):
传递element自身（DOMElement）：
<p id="p" onclick="doThing(this)">
see live example on jsFiddle
在jsFiddle上查看实时示例
回答by Semra
Since inline events are executed as functions you can simply use arguments.
由于内联事件作为函数执行，您可以简单地使用参数。
<p id="p" onclick="doSomething.apply(this, arguments)">
and
和
function doSomething(e) {
if (!e) e = window.event;
// 'e' is the event.
// 'this' is the P element
}
The 'event' that is mentioned in the accepted answer is actually the name of the argument passed to the function. It has nothing to do with the global event.
接受的答案中提到的“事件”实际上是传递给函数的参数的名称。它与全球事件无关。
回答by Wadih M.
You don't need to pass this, there already is the eventobject passed by default automatically, which contains event.targetwhich has the object it's coming from. You can lighten your syntax:
您不需要 pass this，event默认情况下已经有对象自动传递，其中包含event.target它来自的对象。您可以简化语法：
This:
这：
<p onclick="doSomething()">
Will work with this:
将与此一起使用：
function doSomething(){
console.log(event);
console.log(event.target);
}
You don't need to instantiate the eventobject, it's already there. Try it out. And event.targetwill contain the entire object calling it, which you were referencing as "this" before.
您不需要实例化event对象，它已经存在。试试看。并且event.target将包含调用它的整个对象，您之前将其称为“this”。
Now if you dynamically trigger doSomething() from somewhere in your code, you will notice that eventis undefined. This is because it wasn't triggered from an event of clicking. So if you still want to artificially trigger the event, simply use dispatchEvent:
现在，如果您从代码中的某处动态触发 doSomething()，您会注意到它event是未定义的。这是因为它不是由点击事件触发的。因此，如果您仍然想人为地触发事件，只需使用dispatchEvent：
document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));
Then doSomething()will see eventand event.targetas per usual!
然后doSomething()会看到event和event.target往常一样的！
No need to pass thiseverywhere, and you can keep your function signatures free from wiring information and simplify things.
无需this到处传递，您可以使您的函数签名不受接线信息的影响并简化事情。
