How to Pass Event as Argument to an Inline Event Handler in JavaScript

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

to pass the event object:

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

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):

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

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: "When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters". There's much more additional documentation at the link.

How to pass an event object to a function in Javascript?

Although this is the accepted answer, toto_tico's answer below is better :)

Try making the onclick js use 'return' to ensure the desired return value gets used...

<button type="button" value="click me" onclick="return check_me();" />

What all information we can pass as parameters to inline event handlers?

I believe you can refer to any property that's somewhere in the element's prototype chain as a standalone variable:

function someFunction(id, onclick, children, clientTop) {  console.log(id);        // someId  console.log(onclick);   // note, this is null, not undefined!  console.log(children);  // length 0, but still an HTMLCollection  console.log(clientTop); // 2}

<input type="text" value="Hello" onchange="someFunction(id, onclick, children, clientTop);" id="someId" />

Passing event data in the inline event handlers

<input onkeydown="myfunc(event)">

function myfunc (e) {
    e = e || window.event;
    var code = e.keyCode;
    alert (code);
}

How to pass multiple arguments in an inline event listener?

to get to the underlying event you can use $event

see https://v3.vuejs.org/guide/events.html#methods-in-inline-handlers

React onClick - pass event with parameter

Try this:

<button 
   onClick={(e) => {
      this.clickMe(e, someParameter);
   }}
>
Click Me!
</button>

And in your function:

function clickMe(event, someParameter){
     //do with event
}

How do you pass the target element as an argument to an inline event handler?

Looks fine to me

<script type="text/javascript">
function someEvent(t) {
    alert(t.tagName)
}
</script>

<a onclick='someEvent(this)'>Click me</a>

I think the cause of the problem is dynamic element generation. How are you adding the attribute to the element?

Why not just use addEventHandler during the dynamic element generation?

passing extra parameter to event handler

You can use the .bind method and the arguments object inside the function to access extra parameters you want to pass in

$(function(){
  $('#btn').click(function(){

    var id = $(this).attr('id');

    util.doSomething({
          property1: "SomeValue1",
          property2: "SomeValue2",
          onDone: update.bind(this, id)
      })
  })

   function update()
   {
       console.log(arguments); // inside arguments you should see all your parameters
       // arguments[0] your id
       // arguments[1] your response
   }
})

How to Pass Event as Argument to an Inline Event Handler in JavaScript