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

  • Z时代
  • 2024-01-10
  • 分类：问答

以传统方式添加事件侦听器：

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

任何的想法？

回答：

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

productLineSelect.addEventListener('change', getSelection, false);
function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

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

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

如果你想设置的值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);
}

以上是 如何在addEventListener中使用函数传递参数？ 的全部内容， 来源链接： utcz.com/qa/435027.html

回到顶部