How can I get the javascript event object inside a event handler?

Question

I have a div with onclick param:

<div onclick="some_function()"></div>

How can I access the event object inside the function? I need it to get event.target

function some_function() 
{
event = event || window.event;
var target = event.target || event.srcElement;
//does not work in IE and Firefox, but works in chrome
}

davidbuzatto · Answer 1 · 2012-08-19T12:53:36.923

9

This way:

<div onclick="some_function(event)"></div>

function some_function(evt) 
{
    // do something with evt (the event passed in the function call)
}

Note that the argument name MUST be event in the function call. In the event handler you can use the name you want.

A live example: http://jsfiddle.net/davidbuzatto/KHyAb/

edited Aug 19 '12 at 12:53

answered Aug 19 '12 at 12:47

davidbuzatto

9,207
1
43
50

score 3 · Answer 2 · answered Nov 30 '18 at 12:40

If we work with event listeners, then you have in 'this' the html element and in 'event' the event object.

<a id="mya" href="#">Link</a>
var myA= document.querySelector("#mya");
myA.addEventListener("click", some_function);
function some_funtion() {
  //Here the html element is: this
  //Here the event object is: event
  //event.target is not always equal to this
}
<div id="mydiv">click here <span>then here</span></div>
var myDiv = document.querySelector("#mydiv");
myDiv.addEventListener("click", other_function);
function other_function() {
    alert(this === event.target);
}

Samson · Accepted Answer · 2019-03-13T18:56:58.160

0

Use the event to get to the target. Beware of target vs currentTarget issues:

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

   <div onclick="some_function(event)"></div>

   function some_function(event) 
   {
       // event.target is the DOM element that triggered the event
   }

edited Mar 13 '19 at 18:56

answered Aug 19 '12 at 12:48

Samson

2,801
7
37
55

1

He wants the event object, not the target. – davidbuzatto Aug 19 '12 at 12:49
As I see it..he wants the event to get to the target:) – Samson Aug 19 '12 at 12:49
1

`this` is not always the same as `event.target` – gray state is coming Aug 19 '12 at 12:53
Could you explain? http://stackoverflow.com/questions/925734/whats-this-in-javascript-onclick – Samson Aug 19 '12 at 12:57
1

When you have elements nested inside the one that has the handler, `this` will always refer to the element with the handler, but `event.target` will refer to the most deeply nested element clicked. `
click here then here
` – gray state is coming Aug 19 '12 at 13:03

antelove · Answer 4 · 2017-12-22T11:20:01.543

0

Using event and this, both

document.querySelector("div").addEventListener("click", function(event) {

  some_function(event, this);
  
}, false);

function some_function(currentEvent, currentObject) {

  alert("Object is: " + currentObject.nodeName);
  alert("Event is: " + currentEvent.type);
  
};

<div>Click Me</div>

edited Dec 22 '17 at 11:20

answered Dec 19 '17 at 13:03

antelove

3,216
26
20

Alexys Herleym Rodriguez Avell · Answer 5 · 2018-11-30T21:36:05.397

0

<div onclick="some_function(this, event)"></div>
function some_function(elem, e) 
{
    //You have both: html element (elem), and object event (e)
    //elem is not always equal to e.target
}

<div onclick="alert(this === event.target);">click here <span>then here</span></div>

edited Nov 30 '18 at 21:36

answered Nov 30 '18 at 10:27

Alexys Herleym Rodriguez Avell

41
3

This is valid for Inline event handlers, as was asked. But if we work with event listeners, then you have in 'this' the html element and in 'event' the event object. – Alexys Herleym Rodriguez Avell Nov 30 '18 at 12:12

How can I get the javascript event object inside a event handler?

5 Answers5