将参数传递给EventListener函数

我正在构建一个简单的计算器应用程序。我试图完成三件事：将参数传递给EventListener函数

将一个事件监听器分配给按钮。
点击按钮后，触发事件。

使用eventListener函数显示单击按钮的值。

for (i = 0; i < btn.length; i++) { 
    var btnVal = btn[i].value; 
    btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
} 

function displayNumber(param) { 
    displayedNum.innerHTML = param; 
}

这似乎传递给事件侦听器功能时btnVal无法访问。

来源

2017-09-13 Peter Jacuzzi

为什么你不能在按钮本身上用'this'来定义这个函数？ – tadman

定义事件侦听器（或其他异步的东西）。你可能会认为你正在创建几个不同的btnVal变量，每次循环一次，但你不是。这VAR btnVal被提升到顶部，再利用，让你的代码最终表现是这样的：

var btnVal; 
for (i = 0; i < btn.length; i++) { 
    btnVal = btn[i].value; 
    btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
}

因此，所有的事件侦听器的使用非常相同的变量进行交互，而当他们最终获得点击，他们”只会看到分配给btnVal的最后一个值，它应该是btn[btn.length -1].value。数组中较早的所有值都会丢失。

有您能解决这几个方面：

1），而不是依赖于一个封闭的变量，你可以从元素本身当事件熄灭拉。

for (i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", function (event) { 
    displayNumber(event.target.value); 
    }); 
}

2）将事件侦听器创建成一个功能，并在通过btnVal。因为它现在是一个函数参数，它得到一个新的绑定。

for (i = 0; i < btn.length; i++) { 
    createListener(btn[i], btn[i].value); 
} 

function createListener(element, val) { 
    element.addEventListener("click", function() { displayNumber(val) }, false); 
}

3）你可以使用IIFE进行内联。

for (i = 0; i < btn.length; i++) { 
    (function (button) { 
     button.addEventListener("click", function() { displayNumber(button.value) }, false); 
    })(btn[i]); 
}

编辑：增加选项4

4）如果你可以使用ES2015，使用let。让我们阻止范围，并且每次通过循环都会得到一个新的绑定

for (i = 0; i < btn.length; i++) { 
    let btnVal = btn[i].value; 
    btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
}

来源

2017-09-13 14:15:20

这是一个很好的回应和解释。谢谢！ –

该分配不会像那样工作。相反，使用目标的值

for (i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", function(e) { 
    displayNumber(e.target.value) 
    }, false); 
}

来源

2017-09-13 14:08:25 baao

你不能在事件中使用btnVal。

它应该看起来像一个循环是棘手这里面

for (i = 0; i < btn.length; i++) { 
btn[i].addEventListener("click", function(event) { 
    var clickedButton = event.target || event.srcElement; 
    console.log(clickedButton.value) 
}, false); 
}

来源

2017-09-13 14:11:56

将参数传递给EventListener函数

回答

相关问题