Passing parameters when assigned to an event

Question

How do I pass parameters to a function that is assigned to a mouse event? I know the following line won't work. The receiving function just doesn't take parameters in the calling order. I've tried addEventListener and it works with it but I had problems with removing the event so I'm looking to work it out in this way.

document.onmousemove = timesheet.draw(e,newEl);

var Timesheet = function() {
    ...
    this.draw = function(e,newEl) {
       ...
    }
}

$(document).ready(function() {
    timesheet = new Timesheet();
    document.onmousedown = function(e) {
        ...
        var newEl = $('</div');
        document.onmousemove = timesheet.draw(e,newEl);
    }

    document.onmouseup = function(e) {
        document.onmousemove = null;
    }
});

http://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters — Deep, Nov 19 '16 at 14:25
Possible duplicate of [Passing parameters to event listeners / handlers](http://stackoverflow.com/questions/1464925/passing-parameters-to-event-listeners-handlers) — Geeky, Nov 19 '16 at 14:27
So you wish to pass to event of the `onmousedown` to the function called in `onmousedown`? — BenM, Nov 19 '16 at 14:30

Rafał R · Answer 1 · 2016-11-19T14:45:10.837

This is my code snippet of pure javscript method that i use on dom object wrappers to attach events with extra params.

/**
 * Attach event listener.
 * @param {string} eventName
 * @param {function} handler
 * @param {bool} useCapture
 * @param {array} extraParams
 */
AbstractViewObject.prototype.on = function (eventName, handler, useCapture, extraParams) {
    var self = this;
    var name = eventName + '-' + handler.name;
    var obj = {};

    if (typeof handler.name === 'undefined') {
        throw new Error('Can\'t register an anoymous function as handler!');
    }

    obj[name] = function (e) {
        var params = [e];
        if (Array.isArray(extraParams) && extraParams.length > 0) {
            params = params.concat(extraParams);
        }
        handler.apply(self, params);
    };
    this.eventsMap[name] = obj[name];
    this.dom.addEventListener(eventName, obj[name], useCapture);
};

/**
 * Remove event listener.
 * @param {string} eventName
 * @param {function} handler
 */
AbstractViewObject.prototype.off = function (eventName, handler) {
    var name = eventName + '-' + handler.name;
    if (this.eventsMap[name]) {
        this.dom.removeEventListener(eventName, this.eventsMap[name]);
        this.eventsMap[name] = null;
    }
    else {
        throw new Error('This object doesn\'t posses such handler. Event: ' + eventName + '. Handler: ' + handler.name);
    }
};

This code forces named based function handlers to help sustain references to functions in case on removing them. This is why you could have problems with removeEventHandler. If you add anoymous function as a handler you can remove it only by passing reference to the same function. So you have to keep it in some var that will latter be used in removal.

Passing parameters when assigned to an event

1 Answers1