带参数的 Javascript 事件处理程序

Javascript event handler with parameters(带参数的 Javascript 事件处理程序)

doClick = function(func){var elem = ..//它所涉及的元素elem.onclick = 函数(e){函数(e，元素)；}}doClick(函数(e，元素){//处理元素和事件});

doClick = function(func){var that = this;this.element.onclick = 函数(e){函数(e，那个)；}}

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

p>

function addClickHandler(elem, arg1, arg2) {elem.addEventListener('click', function(e) {//这里的事件处理函数中，可以直接引用//从父函数参数到 arg1 和 arg2}， 错误的);}

根据您的具体编码情况，您几乎总是可以让某种闭包为您保留对变量的访问权限.

根据您的评论，如果您想要完成的是:

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

然后，您可以使用自执行函数 (IIFE) 来执行此操作，该函数在闭包执行时捕获您想要的参数并返回实际的事件处理函数:

element.addEventListener('click', (function(passedInElement) {返回函数(e){func(e，passedInElement)；};}) (this.elements[i]), false);

有关 IIFE 工作原理的更多信息，请参阅以下其他参考资料:

Javascript 在匿名函数中封装代码

JavaScript 中的立即调用函数表达式 (IIFE) -传递 jQuery

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

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

//在捕获闭包中的参数时返回我们的事件处理程序函数句柄事件(passedInElement){返回函数(e){func(e, passInElement);};}element.addEventListener('click', handleEvent(this.elements[i]));

<小时>

也可以使用 .bind() 为回调添加参数.您传递给 .bind() 的任何参数都将添加到回调本身将具有的参数之前.所以，你可以这样做:

elem.addEventListener('click', function(a1, a2, e) {//在事件处理程序中，您可以访问两个参数//和事件处理程序传递的事件对象}.bind(elem, arg1, arg2));

I want to make an eventHandler that passes the event and some parameters. The problem is that the function doesn't get the element. Here is an example:

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

The elem must be defined outside of anonymous function. How can i get the passed element to use within the anonymous function? Is there a way to do this?

And what about addEventListener? I don't seem to be able to pass the event through an addEventListener at all do I ?

Update

I seemed to fix the problem with 'this'

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

Where this contains this.element that i can access in the function.

The addEventListener

But i'm wondering about the addEventListener:

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

I don't understand exactly what your code is trying to do, but you can make variables available in any event handler using the advantages of function closures:

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

Depending upon your exact coding situation, you can pretty much always make some sort of closure preserve access to the variables for you.

From your comments, if what you're trying to accomplish is this:

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

Then, you could do this with a self executing function (IIFE) that captures the arguments you want in a closure as it executes and returns the actual event handler function:

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

For more info on how an IIFE works, see these other references:

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?

This last version is perhaps easier to see what it's doing like this:

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

It is also possible to use .bind() to add arguments to a callback. Any arguments you pass to .bind() will be prepended to the arguments that the callback itself will have. So, you could do this:

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

这篇关于带参数的 Javascript 事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！