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

Question

嗯，我不知道任何其他方式来问这个。所以，这里有一个例子：

element.onclick = myfunction(50, 3); 

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

现在，当我把这个功能，因为其他功能参数与它冲突，它不能识别我的“事件”的对象，我知道函数应该被称为（回调），但我需要参数来为我做些事情，那么如何做到这一点？

编辑： 我需要用我的功能有一个以上的元素，所以他们每个人都会得到不同的（偏移&空间）值。

Answer 1

首先，我会显示你的错误在哪里。你overridding 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); 

单击处理程序将记录y，如果用户在最初5秒点击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的click eventhandler。

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

如果微软遵循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。