带参数的Javascript事件处理程序

时间:2012-04-03 19:32:37

标签: javascript events event-handling handler

我想创建一个传递事件和一些参数的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);
}

8 个答案:

答案 0 :(得分:74)

我不明白你的代码究竟在做什么,但你可以使用函数闭包的优点在任何事件处理程序中使用变量:

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 wrapping code inside anonymous function

Immediately-Invoked Function Expression (IIFE) In JavaScript - Passing jQuery

What are good use cases for JavaScript self executing anonymous functions?

这最后一个版本可能更容易看到它正在做什么:

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

答案 1 :(得分:12)

这是一个老问题,但却很常见。所以,让我在这里添加这个。

使用ES2015语法,您可以更简洁地实现它:

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

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

答案 2 :(得分:9)

您可以尝试使用bind方法,我认为这可以实现您的要求。如果没有别的,它仍然非常有用。

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

答案 3 :(得分:2)

鉴于对原始问题的更新,在传递事件处理程序时似乎存在上下文(“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 call() & apply() vs bind()?

答案 4 :(得分:2)

简短回答:

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

... 

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

试试,

const handleOnChange = (event, otherParameter) => {
    console.log(`${event.target.value}`);
    console.log(`${otherParameter}`);
}

<Select onchange= (event) => {
    handleOnChange(event, otherParameter);
}>

答案 7 :(得分:-2)

let obj = MyObject();

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

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