1

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?

Vikash Balasubramanian
  • 2,921
  • 3
  • 33
  • 74
  • 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 Jun 09 '15 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 Jun 09 '15 at 10:32
  • What is `str` supposed to be? It isn't going to get passed by the click event firing. – Quentin Jun 09 '15 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 Jun 09 '15 at 10:40

2 Answers2

3

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>
musefan
  • 47,875
  • 21
  • 135
  • 185
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

Pavlo
  • 43,301
  • 14
  • 77
  • 113