Question

我正在操纵3个表格单元格的背景颜色，具体取决于keydown，keypress和keyup事件。
的 HTML

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt" /><br />

JS

window.onload = function()
{
document.getElementById("txt").addEventListener("Keydown", keyisdown(), false);
document.getElementById("txt").addEventListener("Keyup", keyisup(), false);
document.getElementById("txt").addEventListener("Keypress", keyispress(), false);
}

function keyisdown()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "red";
} 
// above function is repeated twice for keyisup and keyispress

我应该输入字段，并分别更改背景颜色，但所有在页面加载或刷新时运行一次，再也不会，我怎么能解决？感谢。

Answer 1

第一个错误是您正在执行window.load上的功能。只将函数的名称传递给eventListener，在函数名后删除()。

第二：使用.onkeydown而不是附加事件监听器。

第三：我希望你不要在按箭头键和箭头键时改变单元格的颜色。函数onkeydown和onkeyup不会注册按下了哪个键。您必须使用.keyCode。

在下面的示例中，我只包含.onkeydown功能，当按下箭头键时，该功能会将颜色更改为绿色;按箭头键时，颜色会变为红色。

＆＃13;

window.onload = function()
{

document.getElementById("txt").onkeydown =   function(e){
  document.getElementById("press").style.backgroundColor = "white"; 
  document.getElementById("up").style.backgroundColor = "white";
  var code = e.keyCode;
  if(code==40){
    document.getElementById("down").style.backgroundColor = "red";
  }
  else if(code==38){
    document.getElementById("down").style.backgroundColor = "green";
  }
}

}

＆＃13;

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt"/><br />

＆＃13;

Answer 2

检查出来：

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

在这里，您需要了解使用addEventListener

的所有信息

在某些旧浏览器中，不支持此功能。

您可以执行类似于addEventListener的操作：

var element = document.getElementById("element");
element.onclick = function () {
    // 
}

Answer 3

window.onload = function()
{
document.getElementById("txt").addEventListener("keydown", keyisdown, false);
document.getElementById("txt").addEventListener("keyup", keyisup, false);
document.getElementById("txt").addEventListener("keypress", keyispress, false);
}

function keyisdown()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "red";
} 
function keyisup()
{
 document.getElementById("press").style.backgroundColor = "white"; 
 document.getElementById("up").style.backgroundColor = "red";
 document.getElementById("down").style.backgroundColor = "white";
} 

function keyispress()
{
 document.getElementById("press").style.backgroundColor = "red"; 
 document.getElementById("up").style.backgroundColor = "white";
 document.getElementById("down").style.backgroundColor = "white";
}

<table border="1px">
  <tr><th>Event</th><th>Action</th><th>Value</th></tr>
  <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr>
  <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr>
  <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr>
</table>
<input type="text" id="txt" /><br />

Answer 4

解决了它，基本上我使用了另一个IDE，而且工作正常！看起来我正在使用的是马车。 [还必须按照以下用户KittyCat的说明删除{1}}。

函数执行一次而addEventlistener无效

4 个答案: