Question

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

element.onclick = myfunction(50, 3);

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

现在当我调用这个函数时，它无法识别我的“event”对象，因为其他函数参数与它冲突，我知道该函数应该被调用为（回调）但是我需要参数为我做些事情，所以怎么做？

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

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秒内点击y，则点击处理程序将记录nodeX。在前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＆＃39; click event handler。

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

如果Microsoft遵循W3C标准，我们只会使用e.target作为event target。但该公司定义了自己的名为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。

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

1 个答案: