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

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

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); 
 
}

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

this可以在JavaScript中非常混乱，如果不是正确读取解决这个问题是这样的。一个很好的资源，以了解它是here

UPDATE

由于使用的呼叫在评论中指出，示例和捆绑在一起是不完整的。删除它。