addEventListener匿名函数中的Javascript变量范围 [英] Javascript variable scope in addEventListener anonymous function
问题描述
点击每个div时，如果div 1被点击，应该提醒'1';如果div 2被点击，应该提醒'5'。我试图尽可能简化代码，因为这在更大的应用程序中需要。
< head>
< style type =text / css>
＃div1 {background-color：＃00ff00; margin：10px;填充：10px; }
＃div2 {background-color：＃0000ff; margin：10px;填充：10px; }
< / style>
< script type =text / javascript>
函数init（）
{
var total = 1;
var div1 = document.getElementById（'div1'），
div2 = document.getElementById（'div2'）;
$ b var helper = function（event，id）
{
if（event.stopPropagation）event.stopPropagation（）;
if（event.preventDefault）event.preventDefault（）;
alert（'id ='+ id）;
div1.addEventListener（'click'，function（event）{helper（event，total）;}，false）;
total + = 4;
div2.addEventListener（'click'，function（event）{helper（event，total）;}，false）;
}
< / script>
< / head>
< body onload =init（）;>
< div id =div1> 1< / div>
< div id =div2> 2< / div>
< / body>
< / html>
感谢您的帮助！ ： - ）
问题是事件监听器和'total'都存在于同一个作用域（init（））
事件函数总是会在init（）范围内引用总数，即使在声明事件函数后它被更改了
为了解决这个问题，事件函数需要在他们自己的范围内有一个总计，这个范围不会改变。您可以使用匿名函数添加另一个范围层。
例如：
div1.addEventListener（'click'，function（event）{helper（event，total）;}，false）;
}（total））;
total + = 4;
（function（total）{
div2.addEventListener（'click'，function（event）{helper（event，total）;}，false）;
}（total ））;
匿名函数传递init（）当前的'total'值作为参数。这为匿名函数的作用域设置了另一个'total'，所以init（）的总体变化与否，并不重要，因为事件函数将首先引用匿名函数的作用域。
编辑：
另外，你需要在助手函数的大括号后面加一个分号，否则脚本会
var helper = function（event，id）
{
if（event.stopPropagation）event.stopPropagation（）;
if（event.preventDefault）event.preventDefault（）;
alert（'id ='+ id）;
};
When clicking on each div it should alert '1' if div 1 was clicked on or '5' if div 2 was clicked on. I have tried to make this code as easy to as possible because this is needed in a much larger application.
<html>
<head>
<style type="text/css">
#div1 { background-color: #00ff00; margin: 10px; padding: 10px; }
#div2 { background-color: #0000ff; margin: 10px; padding: 10px; }
</style>
<script type="text/javascript">
function init()
{
var total = 1;
var div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
var helper = function(event, id)
{
if (event.stopPropagation) event.stopPropagation();
if (event.preventDefault) event.preventDefault();
alert('id='+id);
}
div1.addEventListener('click', function(event) { helper(event, total); }, false);
total += 4;
div2.addEventListener('click', function(event) { helper(event, total); }, false);
}
</script>
</head>
<body onload="init();">
<div id="div1">1</div>
<div id="div2">2</div>
</body>
</html>
Thanks for your help! :-)
The problem is that the event listeners and 'total' both exist in the same scope (init())
The event functions are always going to reference total within the init() scope, even if it is changed after the event functions are declared
To get around this, the event functions need to have a 'total' in their own scope which will not change. You can add another layer of scope using an anonymous function
For example:
(function (total) {
div1.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));
total += 4;
(function (total) {
div2.addEventListener('click', function(event) { helper(event, total); }, false);
}(total));
The anonymous functions are passed init()'s current 'total' value as a parameter. This sets another 'total' to the anonymous function's scope, so it does not matter if init()'s total changes or not, because the event function will FIRST reference the anonymous function's scope.
Edit:
Also, you need to place a semicolon after the closing brace of the helper function, otherwise the script will complain that 'event' is undefined.
var helper = function(event, id)
{
if (event.stopPropagation) event.stopPropagation();
if (event.preventDefault) event.preventDefault();
alert('id='+id);
};
这篇关于addEventListener匿名函数中的Javascript变量范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
