// 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 a
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?
I'm aware of addEventListener
and jQuery
, please provide a solution for passing event to inline
event hander.
This question is related to
javascript
events
event-handling
parameter-passing
inline
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.
You don't need to pass this
, there already is the event
object passed by default automatically, which contains event.target
which has the object it's coming from. You can lighten your syntax:
This:
<p onclick="doSomething()">
Will work with this:
function doSomething(){
console.log(event);
console.log(event.target);
}
You don't need to instantiate the event
object, it's already there. Try it out. And event.target
will contain the entire object calling it, which you were referencing as "this" before.
Now if you dynamically trigger doSomething() from somewhere in your code, you will notice that event
is 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
:
document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));
Then doSomething()
will see event
and event.target
as per usual!
No need to pass this
everywhere, and you can keep your function signatures free from wiring information and simplify things.
Source: Stackoverflow.com