如何在 element.someEvent 函数中使用更多参数

Question

好吧，我不知道还有什么其他方法可以问这个问题。所以，这是一个例子：

element.onclick = myfunction(50, 3);

function myfunction(event, offset, space){
    event.preventDefault();
    // do some stuff here with offset & space
}

现在当我调用这个函数时它无法识别我的 "event" 对象，因为其他函数参数与它冲突，我知道该函数应该被调用为 (callback) 但我需要参数来做一些事情对我来说，那么该怎么做呢？

我需要将我的函数与多个元素一起使用，因此每个元素都会得到不同的（偏移量和 space）值。

Answer 1

首先，我会告诉你错误在哪里。你用这个覆盖了 onclick：

element.onclick = myfunction(50, 3);

这个表达式其实就是调用myfunction，然后把返回值存入element.onclick。如果要赋值一个函数，应该这样写：

element.onclick = myfunction;

现在我将列出一些将数据传递给事件处理程序的方法。

范围

您可以使用 JavaScript 的范围功能：

var a = 50, b = 3;

element.onclick = function (e) {
  // use e(event), a, or b just normally
};

例如

(function () {
  var element, offset = 1, space = 2;

  element = document.getElementById('x');

  element.onclick = function (e) {
    console.log('onclick', offset, space);
  };

  // Modify the scope variables every second
  window.setInterval(function () { offset++; space++; }, 1000);
})();

bind()

如果您希望同一范围内的不同处理程序具有不同的 offset 和 space 值，您可以 bind() 它们：

element.onclick = function (o, s, evt) {
  // Note, `this` variable is a reference to `element`.
  console.log('onclick', o, s);
}.bind(element, offset, space);

请注意，参数是按值传递的（即它们的值不会在处理程序中更改），除非它们是对象。但是，如果你绑定一个对象，这个对象仍然会被绑定到作用域：

var nodeX, nodeY;

nodeX = document.getElementById('x');
nodeY = document.getElementById('y');

nodeX.onclick = function (y, evt) {
  console.log(y.id);
}.bind(nodeX, nodeY);

// Modify nodeY.id after 5 seconds
window.setInterval(function () { nodeY.id = 'modifiedY'; }, 5000);

如果用户在前 5 秒内点击 nodeX，点击处理程序将记录 y。前 5 秒后 modifiedY 将被记录。

当然你也可以绑定静态值：

someFunction.bind(element, 1, 2);

自定义属性

您还可以将值设置为 element 属性（请参阅 this）：

element.myData = {offset: 50, space = 3};

然后在回调中使用：

element.onclick = function (e) {
  var target;

  if (!e) var e = window.event;

  target = e.target || e.srcElement;

  // Use target.myData.offset, target.myData.space
};

这里我们将匿名函数赋值为element的click event handler.

事件处理程序通常接受一个 event 参数。但是，Microsoft 定义了自己的规则，其中事件参数存储在 window.event 中。所以我们将 e 分配给 window.event，如果 e 未定义。

如果 Microsoft 遵循 W3C 标准，我们将只使用 e.target 作为 event target. But the company defined its own property called srcElement. So we pick one of them by means of the OR operator:

target = e.target || e.srcElement;

既然是event target is a reference to the object that dispatched the event，那么它就变成了对我们element节点的引用。因此，我们可以得到任何 element 属性包括 myData: target.myData.

如何在 element.someEvent 函数中使用更多参数

How to use more parameters in an element.someEvent function

javascript

callback

onclick

dom-events