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方法中的第二个参数传递？据我所知，我只能使用没有括号的函数名称。

有什么想法吗？

顺便说一句，请查看my previous question有关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的值，可以使用the call method来调用该函数：

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

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

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

如果这是您想要的，您只需传递函数引用，并且此示例中的this将在来自addEventListener的调用中为select：

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

如果不是你想要的，那么你最好bind对你传递给addEventListener的函数的价值PhantomJS：< / p>

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

.bind部分也是一个调用，但此调用只返回我们调用bind的相同函数，该函数范围内的this值为< strong>已修复到thisArg，有效地覆盖了此绑定的动态特性。

要了解您的实际问题：＆＃34;如何将参数传递给addEventListener中的函数？＆＃34;

您必须使用其他功能定义：

var globalVar = 'global';

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

现在我们传递事件对象，一个对addEventListener回调中this的值的引用，一个在该回调中定义和初始化的变量，以及一个来自整个addEventListener调用之外的变量给你自己的{{} 1}}功能。

我们也可能在外部回调中再次选择getSelection对象：

this

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

Answer 4

如果您想要的this值只是您将事件处理程序绑定到的对象，那么addEventListener()已经为您执行了此操作。当你这样做时：

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

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

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

作为解释：

您可以将this的值保存到其他事件处理程序的本地变量中。
然后创建一个匿名函数来传递addEventListener。
在该匿名函数中，您调用实际函数并将保存的值this传递给它。

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

4 个答案: