JavaScript的事件处理程序的参数JavaScript的事件处理程序的参数(Javascrip

我想作出这样的传递事件以及一些参数的事件处理程序。问题是，该功能没有得到的元素。下面是一个例子：

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

Answer 1:

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

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

Answer 2:

这是一个老问题，但常见的一种。因此，让我在这里补充这一个。

随着ES2015语法就可以实现更简洁的方式：

function event_handler(event, arg) {
  console.log(event, arg);
}

element.addEventListener('click', (event) => event_handler(event, 'Here comes the argument'));

Answer 3:

有些事情，你可以尝试使用绑定的方法，我认为，这达到你要求的。如果不出意外，它仍然是非常有用的。

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 4:

鉴于更新原来的问题，好像有与上下文的麻烦（“本”），同时通过事件处理程序。基础知识在这里解释如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调用（）申请（）与bind（）的？

Answer 5:

简短的回答：

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
}

Answer 6:

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 7:

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.

文章来源: Javascript event handler with parameters