Passing parameter to invoked event handler, i.e. element.onchange(); javascript

Question

I have a function like this:

function doSomething()
{
  // do something with select element
}

document.getElementById("selectel").onchange = doSomething;

// Call onchange event
document.getElementById("selectel").onchange();

Now, I recognize that I could call the function directly and pass a parameter. But I'd like to know if it's possible to pass a parameter to the onchange() event handler after it's evoked. I tried

document.getElementById("selectel").onchange("hello");

, but this didn't work.

Thank you for your help.

Answer 1

You need to bind a parameter to your function. I'm going to copy paste a function from Ext-JS that lets you do just that. Warning: not for beginners

/**
 * Create a new function from the provided <code>fn</code>, change <code>this</code> to the provided scope, optionally
 * overrides arguments for the call. (Defaults to the arguments passed by the caller)
 *
 * @param {Function} fn The function to delegate.
 * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the function is executed.
 * <b>If omitted, defaults to the browser window.</b>
 * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
 * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
 * if a number the args are inserted at the specified position
 * @return {Function} The new function
 */
function bind(fn, scope, args, appendArgs) {
    var method = fn,
        applyArgs;

    return function() {
        var callArgs = args || arguments;

        if (appendArgs === true) {
            callArgs = Array.prototype.slice.call(arguments, 0);
            callArgs = callArgs.concat(args);
        }
        else if (typeof appendArgs == 'number') {
            callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
            applyArgs = [appendArgs, 0].concat(args); // create method call params
            Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
        }

        return method.apply(scope || window, callArgs);
    };
}

You can use it like

function onChange(e, customParameter) {
  // Whatever code
}

document.getElementById("selectel").onchange = bind(onChange, null, ["customParameter"], true);

When your handler is called, additional parameters are appended to the arguments passed by the event handler (the event object).

There's a lot of meat in this function, so feel free to ask any additional questions.

Here's a jsfiddle to see it in action http://jsfiddle.net/yBhG6/