Javascript event handler with parameters


Answers

Something you can try is using the bind method, I think this achieves what you were asking for. If nothing else, it's still very useful.

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);
Question

I want to make an eventHandler that passes the event and some parameters. The problem is that the function doesn't get the element. Here is an example:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

The 'elem' must be defined outside of anonymous function. How can i get the passed element to use within the anonymous function? Is there a way to do this?

And what about addEventListener? I don't seem to be able to pass the event through an addEventListener at all do I ?

Update

I seemed to fix the problem with 'this'

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

Where this contains this.element that i can access in the function.

The addEventListener

But i'm wondering about the addEventListener:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}



It is an old question but a common one. So let me add this one here.

With ES2015 syntax you can achieve it more succinct way:

function event_handler(event, arg) {
  console.log(event, arg);
}

element.addEventListener('click', (event) => event_handler(event, 'Here comes the argument'));



Passing parameters to event handler in jquery

Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:

$(options.host_element).find('select').on('change',function(){
    graph_widget.draw_graph(options);
});

Bind is used to change the value of this that will be used in the function, not quite what you're looking for.

I made a small fiddle to demonstrate:

Fiddle




JavaScript DOM addeventlistener pass paramater

One solution is to use a named function to add the handler like

function addClickHandler(element, color) {
    element.addEventListener("click", function (e) {
        this.style.backgroundColor = color;
    }, false);
}

then

addClickHandler(element, 'red')



pass parameter to click function

you can pass data to your event handler :

myOBJ = {
  myfunc: function (evt) {
      evt.preventDefault();
      alert(evt.data.u);
  }
}
myobj.click({ u: '2 is the lucky number' }, myfunc);