将参数传递给调用的事件处理程序，即 element.onchange(); javascript

Question

我有一个这样的函数：

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

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

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

现在，我认识到我可以直接调用该函数并传递参数。但我想知道是否可以在调用 onchange() 事件处理程序后将参数传递给它。我尝试过

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

，但这没有用。

感谢您的帮助。

Answer 1

您需要将参数绑定到您的函数。我将从 Ext-JS 复制粘贴一个函数，让您可以做到这一点。 警告：不适合初学者

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

您可以像调用处理程序时一样使用它

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

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

，附加参数将附加到事件处理程序（事件对象）传递的参数中。

这个函数有很多内容，所以请随时提出任何其他问题。

这是一个 jsfiddle，可以看到它的实际效果 http://jsfiddle.net/yBhG6/

Answer 2

声明一个匿名函数：

document.getElementById("selectel").onchange = function() { doSomething("hello"); }

Answer 3

您可以使用 apply() 方法来传递参数。

doSomething.apply(document.getElementById("selectel"), "hello");

Answer 4

我可以看到解决这个问题的两种方法。

一种是通过将 select 传递为 this 来直接调用回调：

doSomething.apply(document.getElementById("selectel"), "Hello");

第二种与 Igor 类似，但需要其他变量的帮助：

var param = "foo"; // Whatever default is
document.getElementById("selectel").onchange = function() {
    doSomething(param);
} 

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