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版本首先传递了curried参数，然后是调用curried版本的参数。虽然我认为如果您愿意，可以轻松交换它们。

以下是curry在ES2015 +中的功能+：

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

Answer 2

只需为您的事件处理程序使用匿名函数，该函数调用您的evt函数并传入事件对象和参数：

myDiv.addEventListener('click', function ( e ) {
  evt( e, 'hello' );
} );

向事件函数添加其他参数

JSFiddle

2 个答案: