附加addEventListener時不要調用事件

Question

我正在嘗試做一個函數來計算剩餘的字符數。我想用addEvenetListener監聽事件類型：

var output = document.getElementById('output'); 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 
\t var charCount = 10; 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 

 
    
 
    
 
\t function textCounter(){ 
 
\t \t console.log("it works"); 
 
\t \t var count = charCount - document.getElementById("tweettext").value.length; 
 
\t \t 
 
\t \t if(count < 0){ 
 
\t \t \t output.classList.add("red"); 
 
\t \t \t output.classList.remove("black"); 
 
\t \t \t console.log("Less than zero"); 
 
\t \t }else{ 
 
\t \t \t output.classList.add("black"); 
 
\t \t \t output.classList.remove("red"); 
 
\t \t } 
 
\t \t output.innerHTML = count + " characters left"; 
 
\t } 
 
\t 
 

 
    tweetTxt.addEventListener('onKeyDown', textCounter, false); 
 
    tweetTxt.addEventListener('onKeyUp', textCounter, false); 
 
    tweetTxt.addEventListener('onChange', textCounter, false);

<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div> 
 
\t \t \t <textarea name="tweettext" id="tweettext"> 
 
\t \t \t \t 
 
\t \t \t </textarea> 
 
\t \t </div> 
 
\t \t <div id="output" class="black"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

出於某種原因，這是行不通的。但是，當我附上聽衆<textarea>元素它的工作原理：

var output = document.getElementById('output'); 
 
\t //var tweetTxt = document.getElementById("tweettext"); 
 
\t var charCount = 10; 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 

 
    
 
    
 
\t function textCounter(){ 
 
\t \t console.log("it works"); 
 
\t \t var count = charCount - document.getElementById("tweettext").value.length; 
 
\t \t 
 
\t \t if(count < 0){ 
 
\t \t \t output.classList.add("red"); 
 
\t \t \t output.classList.remove("black"); 
 
\t \t \t console.log("Less than zero"); 
 
\t \t }else{ 
 
\t \t \t output.classList.add("black"); 
 
\t \t \t output.classList.remove("red"); 
 
\t \t } 
 
\t \t output.innerHTML = count + " characters left"; 
 
\t } 
 
\t 
 

 
/* tweetTxt.addEventListener('onKeyDown', textCounter, false); 
 
    tweetTxt.addEventListener('onKeyUp', textCounter, false); 
 
    tweetTxt.addEventListener('onChange', textCounter, false); */

<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div> 
 
\t \t \t <textarea name="tweettext" id="tweettext" onKeyUp="textCounter();" onKeyDown="textCounter();" onChange="textCounter();"> 
 
\t \t \t \t 
 
\t \t \t </textarea> 
 
\t \t </div> 
 
\t \t <div id="output" class="black"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

所以，我在做什麼毛病以上addEvenetListener方式？

Answer 1

當您想使用addEventListener附加事件時，請勿使用「on」前綴。例如，您應該使用像​​而不是OnKeyDown。

tweetTxt.addEventListener('keydown', textCounter, false); 
tweetTxt.addEventListener('keyup', textCounter, false); 
tweetTxt.addEventListener('change', textCounter, false); 

DEMO

注：在Internet Explorer 8和更早版本不支持addEventListener（）方法。

Answer 2

只需簡單地在你的代碼更改事件名稱此：

var output = document.getElementById('output'); 
 
var charCount = 10; 
 
var tweetTxt = document.getElementById("tweettext"); 
 

 
function textCounter(){ 
 
    console.log("it works"); 
 
    var count = charCount - document.getElementById("tweettext").value.length; 
 

 
    if(count < 0){ 
 
    output.classList.add("red"); 
 
    output.classList.remove("black"); 
 
    console.log("Less than zero"); 
 
    }else{ 
 
    output.classList.add("black"); 
 
    output.classList.remove("red"); 
 
    } 
 
    output.innerHTML = count + " characters left"; 
 
} 
 

 
tweetTxt.addEventListener('keydown', textCounter, false); 
 
tweetTxt.addEventListener('keyup', textCounter, false); 
 
tweetTxt.addEventListener('change', textCounter, false);

<div class="container"> 
 
    <div class="row"> 
 
    <div> 
 
     <textarea style="width: 100%" name="tweettext" id="tweettext" rows="10"></textarea> 
 
    </div> 
 
    <div id="output" class="black"> 
 

 
    </div> 
 
    </div> 
 
</div>

但是，您添加3個事件，以一個元素，它會火災至少3倍。當你輸入一些東西時，每個輸入的字符都會觸發2個事件。鍵入並鍵入。當你失去對textarea的關注時，更改事件觸發。

我的建議很簡單，使用KEYUP或keydown事件，與附加條件一起檢查，如果用戶鍵入有效的字符（不按ESC鍵，功能鍵等）。如果您不需要計數，請使用更改事件。

有你可以連接到它來代替KEYUP，KEYDOWN另一個事件。

tweetTxt.addEventListener('input',function(e){ 
 
    // yourcode 
 
});

好運。