Javascript事件处理程序的参数

我想做一个eventHandler来传递事件和一些参数。 问题是该函数没有得到该元素。 这里是一个例子：

doClick = function(func){ var elem = .. // the element where it is all about elem.onclick = function(e){ func(e, elem); } } doClick(function(e, element){ // do stuff with element and the event }); 

必须在匿名函数之外定义“元素”。 我怎样才能获得通过使用匿名函数内的元素？ 有没有办法做到这一点？

那么addEventListener呢？ 我似乎无法通过addEventListener来传递事件吗？

更新

我似乎用“这个”来解决这个问题，

 doClick = function(func){ var that = this; this.element.onclick = function(e){ func(e, that); } } 

这里包含了我可以在函数中访问的this.element。

addEventListener

但是我想知道addEventListener：

 function doClick(elem, func){ element.addEventListener('click', func(event, elem), false); } 

Answer 1

我不明白你的代码正在做什么，但是你可以使用函数闭包的优点在任何事件处理程序中使variables可用：

 function addClickHandler(elem, arg1, arg2) { elem.addEventListener('click', function(e) { // in the event handler function here, you can directly refer // to arg1 and arg2 from the parent function arguments }, false); } 

根据你的确切的编码情况，几乎总是可以让某种closures保持对你的variables的访问。

从你的意见，如果你想完成的是这样的：

 element.addEventListener('click', func(event, this.elements[i])) 

然后，你可以用一个自执行函数（IIFE）来执行这个操作，它在执行时捕获你想要的参数，并返回实际的事件处理函数：

 element.addEventListener('click', (function(passedInElement) { return function(e) {func(e, passedInElement); }; }) (this.elements[i]), false); 

有关IIFE如何工作的更多信息，请参阅以下其他参考资料：

JavaScript包装匿名函数中的代码

在JavaScript中立即调用函数expression式（IIFE） – 传递jQuery

JavaScript自我执行匿名函数的好用例是什么？

这最后的版本可能更容易看到它是这样做的：

 // return our event handler while capturing an argument in the closure function handleEvent(passedInElement) { return function(e) { func(e, passedInElement); }; } element.addEventListener('click', handleEvent(this.elements[i])); 

---

也可以使用.bind()将参数添加到callback函数中。 您传递给.bind()任何参数都将被添加到callback本身所具有的参数中。 所以，你可以这样做：

 elem.addEventListener(function(a1, a2, e) { // inside the event handler, you have access to both your arguments // and the event object that the event handler passes }.bind(elem, arg1, arg2)); 

Answer 2

你可以尝试的东西是使用绑定方法，我认为这实现了你所要求的。 如果没有别的，它仍然是非常有用的。

 function doClick(elem, func) { var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument diffElem.addEventListener('click', func.bind(diffElem, elem)) } function clickEvent(elem, evt) { console.log(this); console.log(elem); // 'this' and elem can be the same thing if the first parameter // of the bind method is the element the event is being attached to from the argument passed to doClick console.log(evt); } var elem = document.getElementById('elem_to_do_stuff_with'); doClick(elem, clickEvent); 

Answer 3

考虑到原始问题的更新，似乎在传递事件处理程序时上下文（“this”）有问题。 基本的解释，例如在这里http://www.w3schools.com/js/js_function_invocation.asp

你的例子的一个简单的工作版本可以阅读

 var doClick = function(event, additionalParameter){ // do stuff with event and this being the triggering event and caller } element.addEventListener('click', function(event) { var additionalParameter = ...; doClick.call(this, event, additionalParameter ); }, false); 

另请参见Javascript调用（）＆apply（）vs bind（）？

Answer 4

this doThings里面是窗口对象。 试试这个：

 var doThings = function (element) { var eventHandler = function(ev, func){ if (element[ev] == undefined) { return; } element[ev] = function(e){ func(e, element); } }; return { eventHandler: eventHandler }; }; 

Answer 5

 let obj = MyObject(); elem.someEvent( function(){ obj.func(param) } ); //calls the MyObject.func, passing the param.