通過循環添加事件偵聽器後得到此節點值

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

由於使用的呼叫在評論中指出，示例和捆綁在一起是不完整的。刪除它。