Question

假设我有几个textareas，我想为每个textarea添加事件监听器。当我在textarea中键入内容时，我需要控制其中键入的值。在添加事件监听器时，我无法弄清楚如何将“this”引用到循环中调用的每个textarea。下面的代码在浏览器控制台中导致“未定义”。也许你可以把它做好。申请帮助。非常感谢你。

window.addEventListener("load", function(){
    var char_max_inputs = document.querySelectorAll('.char_max');
    for (var i = 0; i < char_max_inputs.length; i++){
        var max_char = char_max_inputs[i].getAttribute("max_char");
        var counter_id = char_max_inputs[i].getAttribute("counter_id");     
        char_max_inputs[i].addEventListener("keyup", function(){count_char(counter_id, max_char);}, false);
    }
});

function count_char(counter_id, max_char) {
    console.log(this.value);
}

Answer 1

您可以使用Function.prototype.bind

解决此问题

＆＃13;

window.addEventListener("load", function() {
  var char_max_inputs = document.querySelectorAll('.char_max');
  for (var i = 0; i < char_max_inputs.length; i++) {
    var max_char = char_max_inputs[i].getAttribute("max_char");
    var counter_id = char_max_inputs[i].getAttribute("counter_id");
    char_max_inputs[i].addEventListener("keyup", count_char.bind(char_max_inputs[i], counter_id, max_char), false);
  }
});

function count_char(counter_id, max_char) {
  console.log(this.value);
}

＆＃13;

<textarea class="char_max"></textarea>
<textarea class="char_max"></textarea>
<textarea class="char_max"></textarea>

＆＃13;

如果没有正确阅读，

this在JavaScript中会非常混乱。理解它的一个很好的资源是here

<强>更新

正如评论中所指出的，使用call和bind的示例是不完整的。删除它。

通过循环添加事件侦听器后获取此节点值

1 个答案: