javascript - 向事件函数添加附加参数

Question

我有一个事件，我想向命名函数添加额外的参数。我尝试了以下两件事:

myDiv.addEventListener('click', evt.call(this, event, 'hello'));

和

myDiv.addEventListener('click', evt(event, 'hello'));

他们两个的问题是，他们会立即被调用，而当您单击 myDiv 时却没有被调用，即应该被调用的时候。

如何向命名函数事件添加额外参数？

JSFiddle

console.clear();

var myDiv = document.getElementById('myDiv');

function evt(event, param1) {
  console.log(event + ' and ' + param1)
}

myDiv.addEventListener('click', evt.call(this, event, 'hello'));

#myDiv {
  width: 200px;
  height: 200px;
  background-color: green;
}

<div id="myDiv"></div>

Answer 1

您可以使用匿名包装器:

myDiv.addEventListener('click', function(event) {
    return evt.call(this, event, 'hello');
});

或者，您可以给自己一个效用函数(我倾向于称它为 curry；纯粹主义者可能会反对这个名称)。这是一个未经优化的即兴表演:

Object.defineProperty(Function.prototype, "curry", {
    value: function() {
        var f = this;
        var boundArgs = Array.prototype.slice.call(arguments);
        return function() {
            return f.apply(this, boundArgs.concat(Array.prototype.slice.call(arguments)));
        };
    }
});

然后:

myDiv.addEventListener('click', evt.curry('hello'));

但是为此，您必须更改 evt 中参数的顺序:

function evt(param1, event) {
  console.log(event + ' and ' + param1)
}

...因为我的 curry 版本首先将柯里化(Currying)参数传递给它，然后是调用柯里化(Currying)版本的参数。尽管我认为如果您愿意，可以很容易地交换它们。

这是 ES2015+ 中的 curry 函数:

Object.defineProperty(Function.prototype, "curry", {
    value(...boundArgs) {
        var f = this;
        return function(...callArgs) {
            return f.call(this, ...boundArgs, ...callArgs);
        };
    }
});