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

无需传递任何东西。用于的函数将自动绑定到当前元素。只需在您的函数中使用：addEventListenerthisthis

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/

---

如果要手动设置 的值，可以使用 call 方法调用函数：this

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

如果所需的值只是将事件处理程序绑定到的对象，则已经为您执行了该操作。执行此操作时：thisaddEventListener()

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

该函数将已调用，并将 set 设置为事件处理程序绑定到的对象。它还将被传递一个表示事件对象的参数，该对象具有有关事件的各种对象信息。getSelectionthis

function getSelection(event) {
    // this will be set to the object that the event handler was bound to
    // event is all the detailed information about the event
}

---

如果所需的值不是将事件处理程序绑定到的对象，则可以执行以下操作：this

var self = this;
productLineSelect.addEventListener('change',function() {
    getSelection(self)
},false);

通过解释：

1. 将 的值保存到其他事件处理程序中的局部变量中。this
2. 然后，创建一个匿名函数来传递 addEventListener。
3. 在该匿名函数中，调用实际函数并向其传递保存的值 。this

当您使用 时，将自动绑定。因此，如果要引用安装事件处理程序的元素，只需在函数中使用：addEventListenerthisthis

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

在 JS 代码的第一行中：

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

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

---

在本例中，由 for 调用的值将自动设置为侦听器附加到的对象。addEventListenerthisproductLineSelect

如果这是你想要的，你可以只传递函数引用，在这个例子中，它将在addEventListener的调用中：thisselect

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

如果这不是你想要的，你最好将你的值绑定到你要传递给的函数：addEventListener

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

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

---

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

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

var globalVar = 'global';

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

现在，我们将事件对象、对 addEventListener 回调中值的引用、在该回调中定义和初始化的变量以及整个 addEventListener 调用外部的变量传递给您自己的函数。thisgetSelection

---

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

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

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