Accessing event object in event handler javascript

Question

I have a code snippet

$(document).on("click", "div[data-role=button]", myfunc);

function myfunc(e){
  alert(event.target);
  alert(e.target);
  alert(event.currentTarget);
  alert(e.currentTarget);
}

Each of them give different outputs when i click on the element.

e is of type object

event is oftype MouseEvent

The e.currentTarget seems to give the correct answer.

My question is if i decided to add another parameter to my handler, how will i get to access the "e", parameter which gives the right answer.

EDIT:

I want to do

function myfunc(e,str){

}

How can i access e inside my function and how do i pass the two arguments?

EDIT 2 I found another interesting thing,

this

this correctly gives the target, even though i expected it to give the document any idea why?

What do you mean add another parameter? You mean like myfunc(e, x)? Obviously that wouldn't be an issue. Can you show example code for what you mean? — musefan
– musefan, Commented Jun 9, 2015 at 10:31
Why would you add another parameter to your handler? It wouldn't get a value when the function was called in response to the event firing. — Quentin
– Quentin, Commented Jun 9, 2015 at 10:32
What is str supposed to be? It isn't going to get passed by the click event firing. — Quentin
– Quentin, Commented Jun 9, 2015 at 10:35
I wanted to allow somebody else to reuse the function, str adds description for a custom event if sombody uses the same handler for a custom event — Vikash Balasubramanian
– Vikash Balasubramanian, Commented Jun 9, 2015 at 10:40

musefan · Accepted Answer · 2015-06-09 10:40:45Z

You access e the same way you are already doing, I guess what you mean is how to set the handler in the click event. How about like this:

$(document).on("click", "div[data-role=button]", function(e) { myfunc(e, "some string"); });

Of course that doesn't make "some string" very flexible (unless you are rebinding the event when it changes), so it could just as easily be fixed in the myfunc function.

If you want it to be based on something, perhaps an attribute of the element being clicked, then perhaps you want:

$(document).on("click", "div[data-role=button]", function(e) { myfunc(e, $(this).data("string")); });

which will get the value of a data-string attribute, for example:

<div data-role="button" data-string="my string 1"></div>

Pavlo · Accepted Answer · 2015-06-09 10:36:39Z

1

Inside myFucnc e is a local variable that refers to the event object. event probably refers to a closure or a global variable.

The difference between target vs currentTarget is the following:

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

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

answered Jun 9, 2015 at 10:36

Pavlo

45.2k14 gold badges83 silver badges114 bronze badges

3 Comments

Vikash Balasubramanian Over a year ago

can you explain how can the element on which the event occured be the Document when i clicked on the button specifically?

Pavlo Over a year ago

That's event bubbling: by default, event will be triggered on each of the ancestors of the element.

Vikash Balasubramanian Over a year ago

Thanks, i finally understood what's going on.

Collectives™ on Stack Overflow

Accessing event object in event handler javascript

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related