如何在addEventListener中使用参数传递给函数？

Question

以传统的方式添加事件监听器:

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;  
}

<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

但我想适应addEventListener方式:

productLineSelect.addEventListener('change',getSelection(this),false);

function getSelection(sel){
    var value = sel.options[sel.selectedIndex].value;
    alert(value);
}

它不起作用,因为我不能将getSelection()中的任何参数作为addEventListener方法中的第二个参数传递？据我所知,我只能使用没有括号的函数名称.

任何的想法？

顺便说一下,请看看我之前关于console.log在safari 6.0开发人员检查器中不起作用的问题,我无法在控制台中编写任何输出,这令人沮丧.

Answer 1

无需传递任何内容.用于的函数addEventListener将自动this绑定到当前元素.只需this在您的功能中使用:

productLineSelect.addEventListener('change', getSelection, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

这是小提琴:http://jsfiddle.net/dJ4Wm/

如果要将任意数据传递给函数,请将其包装在您自己的匿名函数调用中:

productLineSelect.addEventListener('change', function() {
    foo('bar');
}, false);

function foo(message) {
    alert(message);
}

这是小提琴:http://jsfiddle.net/t4Gun/

如果要设置this手动值,可以使用该call方法调用该函数:

var self = this;
productLineSelect.addEventListener('change', function() {
    getSelection.call(self);
    // This'll set the `this` value inside of `getSelection` to `self`
}, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

Answer 2

在您的JS代码的第一行中：

select.addEventListener('change', getSelection(this), false);

您通过将函数引用放在后面来调用getSelection(this)。那很可能不是您想要的，因为您现在正在将该调用的返回值传递给addEventListener，而不是对实际函数本身的引用。

在这种情况下，在由addEventListenerfor值调用的函数中，该函数this将自动设置为侦听器附加到的对象productLineSelect。

如果这是您想要的，则可以传递函数引用，并且this在此示例select中将通过addEventListener 进行调用：

select.addEventListener('change', getSelection, false);

如果那不是您想要的，那么最好bind将此值传递给要传递给的函数addEventListener：

var thisArg = { custom: 'object' };
select.addEventListener('change', getSelection.bind(thisArg), false);

该.bind部分也是一个调用，但是此调用仅返回我们正在调用的相同函数bind，this该函数范围内的value 固定为thisArg，有效地覆盖了此绑定的动态性质。

要解决您的实际问题：“如何将参数传递给addEventListener中的函数？”

您将必须使用其他函数定义：

var globalVar = 'global';

productLineSelect.addEventListener('change', function(event) {
    var localVar = 'local';
    getSelection(event, this, globalVar, localVar);
}, false);

现在，我们传递事件对象，this对addEventListener回调内部的值的引用，在该回调内部定义和初始化的变量以及从整个addEventListener调用外部的变量到您自己的getSelection函数。

我们还可以再次选择将一个对象this放置在外部回调中：

var thisArg = { custom: 'object' };
var globalVar = 'global';

productLineSelect.addEventListener('change', function(event) {
    var localVar = 'local';
    getSelection(event, this, globalVar, localVar);
}.bind(thisArg), false);

Answer 3

使用时addEventListener,this将自动绑定.因此,如果您想要对安装了事件处理程序的元素进行引用,只需this在函数中使用:

productLineSelect.addEventListener('change',getSelection,false);

function getSelection(){
    var value = sel.options[this.selectedIndex].value;
    alert(value);
}

如果你想从你调用的上下文中传入一些其他参数addEventListener,你可以使用一个闭包,如下所示:

productLineSelect.addEventListener('change', function(){ 
    // pass in `this` (the element), and someOtherVar
    getSelection(this, someOtherVar); 
},false);

function getSelection(sel, someOtherVar){
    var value = sel.options[sel.selectedIndex].value;
    alert(value);
    alert(someOtherVar);
}