Question

我试图创建一个计算剩余字符数的函数。我想使用addEvenetListener来监听事件类型：

＆＃13;

var output = document.getElementById('output');
	var tweetTxt = document.getElementById("tweettext");
	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('onKeyDown', textCounter, false);
  tweetTxt.addEventListener('onKeyUp', textCounter, false);
  tweetTxt.addEventListener('onChange', textCounter, false);

＆＃13;

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

＆＃13;

出于某种原因，这不起作用。但是，当我将监听器附加到<textarea>元素时，它可以工作：

＆＃13;

  var output = document.getElementById('output');
	//var tweetTxt = document.getElementById("tweettext");
	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('onKeyDown', textCounter, false);
  tweetTxt.addEventListener('onKeyUp', textCounter, false);
  tweetTxt.addEventListener('onChange', textCounter, false); */

＆＃13;

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

＆＃13;

那么，我上面用addEvenetListener方法做错了什么？

Answer 1

如果要使用addEventListener附加事件，请不要使用＆＃34; on＆＃34;字首。例如，您应该使用keydown代替OnKeyDown。

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

DEMO

注意： Internet Explorer 8及早期版本不支持addEventListener（）方法。

Answer 2

只需将代码中的事件名称更改为：

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是，您向一个元素添加了3个事件，它将至少触发3次。当您键入内容时，每个键入的字符将触发2个事件。按键并按键。当您失去对textarea的关注时，更改事件将会触发。

我的建议很简单，使用keyup或keydown事件，以及检查用户是否正在键入有效字符的其他条件（不按esc键，功能键等）。如果您不需要计数，请使用更改事件。

您可以附加另一个事件来替换keyup，keydown。

＆＃13;

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

＆＃13;

祝你好运。

使用addEventListener附加时不调用事件

2 个答案: