如何将parameter passing给在addEventListener中使用的函数?
以传统方式添加事件侦听器:
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开发人员检查工作,我不能写任何输出在控制台,这是令人沮丧的。
无需传入任何东西。用于addEventListener
的函数将自动this
绑定到当前元素。 只需在你的function中使用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/
如果要手动设置此值,可以使用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
, 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); }
如果你想要的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
值保存到本地variables中。 - 然后创build一个匿名函数来传递addEventListener。
- 在这个匿名函数中,你可以调用你的实际函数并把它的保存值传给它。
对于初学者来说,在你的JS代码的第一行:
productLineSelect.addEventListener('change', getSelection(this), false);
…通过将(this)
放置在函数引用之getSelection
调用 getSelection
。 这很可能不是您想要的,因为您现在将该调用的返回值传递给addEventListener
,而不是对实际函数本身的引用。
在由addEventListener
调用的函数中,此值将自动设置为侦听器所附加的对象,在这种情况下为productLineSelect
。
如果这是你想要的 ,你可以做:
productLineSelect.addEventListener('change', getSelection, false);
如果这不是你想要的 ,你最好把你的值bind
到你传递给addEventListener
的函数:
var myPreferredThis = {}; productLineSelect.addEventListener('change', getSelection.bind(myPreferredThis), false);
.bind
部分也是一个调用,但是这个调用只是返回了我们调用的相同的函数, this
函数作用域的值固定在我们传递的参数上,从而有效地覆盖了这个dynamic性质-捆绑。 所以不需要var self = this;
closures。
为了得到你的实际问题:如何传递参数在addEventListener中的function:
你将不得不使用一个额外的函数定义:
var otherVar = 'accessedThroughClosure'; productLineSelect.addEventListener('change', function (eventObject) { var localVar = 'initializedInEventHandler'; getSelection(eventObject, this, otherVar, localVar); }, false);
现在我们传递事件对象,对addEventListener的callback中的值的引用,在该callback中定义和初始化的variables,以及将整个addEventListener调用外部的variables调用到您自己的getSelection
函数。
当然,你可以再次bind
你select的对象bind
在你的外部callback中:
var myPreferredThis = {}; var otherVar = 'accessedThroughClosure'; productLineSelect.addEventListener('change', function (eventObject) { var localVar = 'initializedInEventHandler'; getSelection(eventObject, this, otherVar, localVar); }.bind(myPreferredThis), false);