带参数的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
});

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

那么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);
}

---

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

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

根据您的确切编码情况，您几乎总是可以通过某种方式来保留对您变量的访问权限。

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

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包装匿名函数中的代码

立即调用函数表达式（IIFE）在JavaScript中 - 传递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()将参数添加到回调函数中。 您传递给.bind()任何参数都将被添加到回调本身所具有的参数中。 所以，你可以这样做：

elem.addEventListener('click', 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));

---

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

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

---

鉴于原始问题的更新，似乎在传递事件处理程序时上下文（“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（）？

链接地址: http://www.djcxy.com/p/96993.html

上一篇: Javascript event handler with parameters

下一篇: Proper use of bind and referencing objects values in a click handler