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

Question

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

element.onclick = myfunction(50, 3);

function myfunction(event, offset, space){
    event.preventDefault();
    // do some stuff here with offset & 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);

请注意，参数是按值传递的(即它们的值不会在处理程序中更改)，除非它们是对象。但是，如果绑定(bind)一个对象，该对象仍将绑定(bind)到作用域:

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 将被记录。

当然，您也可以绑定(bind)静态值:

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
};

这里我们将匿名函数指定为元素的click event handler .

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

如果 Microsoft 遵循 W3C 标准，我们将仅使用 e.target 作为 event target 。但该公司定义了自己的属性(property)，名为 srcElement 。所以我们通过 OR operator 选择其中之一:

target = e.target || e.srcElement;

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