Gestore di eventi Javascript con parametri

Voglio creare un eventHandler che passi l'evento e alcuni parametri. Il problema è che la funzione non ottiene l'elemento. Ecco un esempio:

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

L '"elemento" deve essere definito al di fuori della funzione anonima. Come posso ottenere l'elemento passato da utilizzare all'interno della funzione anonima? C'è un modo per fare questo?

E per quanto riguarda addEventListener? Non mi sembra di essere in grado di passare l'evento tramite un addEventListener, vero?

Aggiornare

Mi sembrava di risolvere il problema con "questo"

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

Dove questo contiene questo elemento a cui posso accedere nella funzione.

Il addEventListener

Ma mi chiedo di addEventListener:

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

Non capisco esattamente cosa stia cercando di fare il tuo codice, ma puoi rendere le variabili disponibili in qualsiasi gestore di eventi utilizzando i vantaggi delle chiusure di funzioni:

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

A seconda della tua esatta situazione di codifica, puoi praticamente sempre fare una sorta di chiusura per preservare l'accesso alle variabili per te.

Dai tuoi commenti, se quello che stai cercando di ottenere è questo:

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

Quindi, potresti farlo con una funzione autoeseguente (IIFE) che acquisisce gli argomenti desiderati in una chiusura mentre esegue e restituisce la funzione di gestore di eventi effettiva:

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

Per ulteriori informazioni su come funziona un IIFE, vedere questi altri riferimenti:

Codice di wrapping Javascript all'interno di una funzione anonima

Espressione di funzione immediatamente invocata (IIFE) in JavaScript - Passaggio di jQuery

Quali sono i buoni casi d'uso per JavaScript che esegue automaticamente funzioni anonime?

Quest'ultima versione è forse più facile da vedere cosa sta facendo in questo modo:

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

È anche possibile utilizzare .bind()per aggiungere argomenti a un callback. Qualsiasi argomento a cui si passa .bind()verrà anteposto agli argomenti che avrà il callback stesso. Quindi, potresti fare questo:

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

È una domanda vecchia ma comune. Quindi lasciatemi aggiungere questo qui.

Con la sintassi della funzione freccia puoi ottenerla in modo più succinto poiché è legata lessicalmente e può essere concatenata.

Un'espressione di funzione freccia è un'alternativa sintatticamente compatta a un'espressione di funzione regolare, sebbene priva di vincoli propri alle parole chiave this, arguments, super o new.target.

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

Se è necessario pulire il listener di eventi:

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

Ecco una battuta folle:

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

Versione più docile : più appropriata per qualsiasi lavoro sano.

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

Qualcosa che puoi provare sta usando il metodo bind, penso che questo ottenga ciò che stavi chiedendo. Se non altro, è comunque molto utile.

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

Dato l'aggiornamento alla domanda originale, sembra che ci siano problemi con il contesto ("questo") durante il passaggio dei gestori di eventi. Le basi sono spiegate ad esempio qui http://www.w3schools.com/js/js_function_invocation.asp

Potrebbe leggere una semplice versione funzionante del tuo esempio

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

Vedi anche Javascript call () & apply () vs bind ()?

Risposta breve:

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

... 

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

thisall'interno di doThingsè l'oggetto finestra. Prova questo invece:

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

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

    return {
        eventHandler: eventHandler
    };
};

let obj = MyObject();

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

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