javascript - 无法读取未定义的属性 'addEventListener'

Question

  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]]。)

也就是说，如果您的目标是提醒被单击元素的值，请改用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);
}