Question

无法读取未定义的属性“addEventListener”

2015-12-28

1367

javascript

  function assign(id){

 return document.getElementById(id) ;
} 
var b = ['p','q','r','s','t','u','v'];
var a = ['fname','lname','email','password','r_password','g_m',"g_f"] ; 

 for (i=0;i<a.length;i++) {
        var x = {} ;
     x[b[i]] = assign(a[i]) ;
      x[i].addEventListener('click', function() { alert(x[i].value) ;} ,false) ;

 }

我只想要在 for 循环中为它们分配变量数组和 ID。

Answer 1

您期望 x[i] 返回您刚刚存储的 DOM 元素，但您将 DOM 元素存储在 x[b[i]] ，而不是 x[i] 。保持一致，该错误就会消失。

但是，代码仍然无法工作，因为您陷入了闭包陷阱：当发生点击时，事件处理程序将使用 i ， 按当时 的原样，而不是创建处理程序时的样子。因此，所有处理程序都将看到 i 作为 a.length 并失败。

我通常使用构建器函数来处理该问题：

for (i = 0; i < a.length; i++) {
    var x = {};
    x[b[i]] = asign(a[i]);
    hookUp(i);
}
function hookUp(index) {
    x[b[index]].addEventListener('click', function() {
        alert(x[b[index]].value);
    }, false);
}

hookUp 使用 index （我们不会更改）而不是 i 。（我还猜测了一下应该使用 x[i] 还是 x[b[i]] 。）

也就是说，如果您的目标是提醒被点击元素的 value ，请改用 this ：

for (i = 0; i < a.length; i++) {
    var x = {};
    x[b[i]] = asign(a[i]);
    x[b[i]].addEventListener('click', function() {
        alert(this.value);
    }, false);
}

或 Event#currentTarget ：

for (i = 0; i < a.length; i++) {
    var x = {};
    x[b[i]] = asign(a[i]);
    x[b[i]].addEventListener('click', function(e) {
        alert(e.currentTarget.value);
    }, false);
}

Answer 2

function asign(id){

     return document.getElementById(id) ;
    } 
    var a = ['a','b','c'];
    var b = ['fname','lname','email'] ; 

     for (i=0;i<a.length;i++) {
       (function(i){
         var x = {} ;
         x[b[i]] = asign(a[i]) ;
         x[b[i]].addEventListener('click', function() { alert(i+1) ;} ,false) ;
         })(i);

     }

<div id="a">Div 1</div>
<div id="b">Div 2</div>
<div id="c">Div 3</div>