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

好运。