How to pass event as argument to an inline event handler in 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        lt p id  p  onclick  doSomething e   gt       lt a href     gt foo lt  a gt       lt span gt bar lt  span gt   lt  p gt    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   edit  I m aware of addEventListener and jQuery  please provide a solution for passing event to inline event hander

User · Answer

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.

User · Answer

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    lt p onclick  doSomething    gt    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

User · Answer

to pass the event object   lt p id  quot p quot  onclick  quot doSomething event  quot  gt   to get the clicked child element  should be used with event parameter  function doSomething e        e   e    window event      var target   e target    e srcElement      console log target      to pass the element itself  DOMElement    lt p id  quot p quot  onclick  quot doThing this  quot  gt   see live example on jsFiddle  You can specify the name of the event as above  but alternatively your handler can access the event parameter as described here   quot When the event handler is specified as an HTML attribute  the specified code is wrapped into a function with the following parameters quot    There s much more additional documentation at the link

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

Examples related to javascript

Examples related to events

Examples related to event-handling

Examples related to parameter-passing

Examples related to inline