Question

我有一个看起来像这样的函数：

foo = document.getElementById("something"); 

foo.addEventListener('change',  function(e){
    value = this[this.selectedIndex].text
    id    = this[this.selectedIndex].value
}, false);


alert(value) // nothing

有没有办法让value和id退出功能范围？

Answer 1

有帮助吗？更改下拉选项后，可以将值传递给回调函数。您获取事件处理程序值的原因是因为您将它们分配给事件处理程序，但在处理程序之外声明它们。请参阅以下示例：

＆＃13;

foo = document.getElementById("something"); 
var value, id;

foo.addEventListener('change',  function(e){
    value = this[this.selectedIndex].text;
    id    = this[this.selectedIndex].value;
    callBack();
}, false);

function callBack() {
   alert(value);
}

＆＃13;

<select id="something">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>

＆＃13;

您没有在代码中获取值的原因是事件处理程序代码稍后在change事件上执行。但是，那时alert代码没有被执行。请注意，在外部作用域中声明的变量可以在内部作用域内访问，但反之亦然。

Answer 2

这里的问题在于您的代码流程。您添加了一个事件侦听器，稍后将异步触发。然而，在更改事件发生之前，您的警报将在添加事件侦听器后立即触发。

如果您只想将它们拉出范围，请在使用之前在您的事件监听器上声明值和id：

foo = document.getElementById("something"); 

var value, id;
foo.addEventListener('change',  function(e){
    value = this[this.selectedIndex].text
    id    = this[this.selectedIndex].value
}, false);

Answer 3

我建议使用一个对象作为值，因为你可以收集一个对象中的所有值而不会污染全局范围。

var foo = document.getElementById("something"),
    values = {};

foo.addEventListener('change', function(e) {
    values.value = this[this.selectedIndex].text;
    values.id    = this[this.selectedIndex].value;
}, false);

alert(values.value);

对于更动态的版本，我建议使用values上的闭包。

var foo = document.getElementById("something"),
    values = {};

foo.addEventListener('change', function (object) {
    return function(e) {
        object.value = this[this.selectedIndex].text;
        object.id    = this[this.selectedIndex].value;
    };
}(values), false);

alert(values.value);

如何在匿名函数中定义变量？

3 个答案: