Javascript event handler with parameters

I don't understand exactly what your code is trying to do, but you can make variables available in any event handler using the advantages of function closures:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

Depending upon your exact coding situation, you can pretty much always make some sort of closure preserve access to the variables for you.

From your comments, if what you're trying to accomplish is this:

element.addEventListener('click', func(event, this.elements[i]))

Then, you could do this with a self executing function (IIFE) that captures the arguments you want in a closure as it executes and returns the actual event handler function:

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

For more info on how an IIFE works, see these other references:

Javascript wrapping code inside anonymous function

Immediately-Invoked Function Expression (IIFE) In JavaScript - Passing jQuery

What are good use cases for JavaScript self executing anonymous functions?

This last version is perhaps easier to see what it's doing like this:

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

It is also possible to use .bind() to add arguments to a callback. Any arguments you pass to .bind() will be prepended to the arguments that the callback itself will have. So, you could do this:

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

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

With arrow function syntax you can achieve it more succinct way since it is lexically bound and can be chained.

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

If you need to clean up the event listener:

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

Here is crazy one-liner:

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

More docile version: More appropriate for any sane work.

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

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

Given the update to the original question, it seems like there is trouble with the context ("this") while passing event handlers. The basics are explained e.g. here http://www.w3schools.com/js/js_function_invocation.asp

A simple working version of your example could read

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

See also Javascript call() & apply() vs bind()?

Short answer:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
} 

Try,

const handleOnChange = (event, otherParameter) => {
    console.log(`${event.target.value}`);
    console.log(`${otherParameter}`);
}

<Select onchange= (event) => {
    handleOnChange(event, otherParameter);
}>

this inside of doThings is the window object. Try this instead:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

This is an old topic and @jfriend00 did a really nice work explaining the basics behind closure function calls.

Lets update the snippets to ES6 and also use another technique that might help us to overcome this kind of scenarios.

First lets define a function handler this function will receive two parameters fnc and val where the fnc is the custom function that will handle the event usually is names on + theEventName in this case onClickEvent. There is nothing new here. Now let's define the onclick listener on the element red and it will be called clickEventHandler like this:

red.onclick = clickEventHandler

As we noticed clickEventHandler does not have any parameter Teo, how can I send the event and the index value to the handler?

Good question, first let's call the handler function to create our custom onClickEvent handler like this:

handler(onClickEvent, index)

But Teo, onClickEvent also does NOT have parameters, How we can send the closure function onClickEvent, the event produced by onclick and index value?

Patience my young padawan. First which function will handle the event? In our scenary will be onClickEvent so lets define this function to receive the event e and the index value v:

function onClickEvent(e, v) {
    console.log(`${e.currentTarget.className} -> [x: ${e.x}, y: ${e.y}] | val: ${v}`)
}

Now lets implement our handler function. This function will return a closure function definition that will execute the function defined in fnc, also will merge the parameters received by the closure function and the val paramenter like this:

function handler(fnc, val) {
    return (...params) => {
    const ctx = this
    const arg = [...params, val]
    fnc.apply(ctx, arg)
    }
}

To call the fnc we used apply(). This method calls the specified function with a given a context ctx, and arg as arguments provided as an array. Therefore, the fnc is executed usint the closure function context ctx.

This is a working snippet for this scenario.

const red = document.querySelector('.red')
const blue = document.querySelector('.blue')

function handler(fnc, val) {
  return (...params) => {
    const ctx = this
    const arg = [...params, val]
    fnc.apply(ctx, arg)
  }
}

function onClickEvent(e, v) {
  console.log(`${e.currentTarget.className} -> [x: ${e.x}, y: ${e.y}] | val: ${v}`)
}

const index = 50

// Define the handler function
const clickEventHandler = handler(onClickEvent, index)

// Call the debounced function on every mouse move
red.onclick = clickEventHandler

blue.addEventListener('click', clickEventHandler)

.boxes {
  width: 100%;
  height: 120px;
  display: flex;
  flex-flow: row nowrap;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.box {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

<div class='boxes'>
  <div class='red box'>Click Me</div>
  <div class='blue box'>Not ready</div>
</div>

Now let's apply this concept to your scenario:

const red = document.querySelector('.red')
const blue = document.querySelector('.blue')
red.clicked = false

let clickEventHandler

function handler(fnc, val) {
  return (...params) => {
    const ctx = this
    const arg = [...params, val]
    fnc.apply(ctx, arg)
  }
}

function onRedClickEvent(e) {
  if (red.clicked) return

  red.clicked = true
  red.textContent = 'Clicked'
  blue.textContent = 'Ready'
  console.log(`${e.currentTarget.className} -> blue is ready`)

  // Define the handler function
  clickEventHandler = handler(onClickEvent, red)

  // Call the debounced function on every mouse move
  blue.addEventListener('click', clickEventHandler)
}

function onClickEvent(e, elem) {
  red.clicked = false
  red.textContent = 'Click Me'
  blue.textContent = 'Not Ready'

  console.log(`${e.currentTarget.className} -> [x: ${e.x}, y: ${e.y}] | elem: ${elem.className}`)

  blue.removeEventListener('click', clickEventHandler)
}



red.onclick = onRedClickEvent

.boxes {
  width: 100%;
  height: 120px;
  display: flex;
  flex-flow: row nowrap;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.box {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  user-select: none;
}

<div class='boxes'>
  <div class='red box'>Click Me</div>
  <div class='blue box'>Not ready</div>
</div>

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.