Question

这样可行：

$('#divID').addEventListener('click', function() {alert('hi');}, false);

然而，我正试图让它发挥作用，但却无法

$('#divID').addEventListener('keypress', function(e) {
    e = event || window.event;
    if (e.keyCode == 40) {
        //do something when the down arrow key is pressed.
    }
}, false);

请帮助，非常感谢。

我正在尝试控制按下向下箭头键时发生的情况，但它仅适用于特定的divID，而不是整个文档。

Answer 1

KeyPress事件仅针对字符（可打印）键调用，KeyDown事件被引发用于包括不可打印的所有键。

此外，行为因浏览器而异。

Answer 2

您已对自己的问题jquery进行了标记，因此我假设您实际上正在使用该问题。

那里有几个问题：

keypress仅针对可打印的字符触发。对于箭头键，您需要keydown（通常）或keyup（很少）。
jQuery实例没有addEventListener方法。你想要on。（或者您可以为要使用的事件使用特定于事件的别名。）
jQuery on方法没有第三个参数。
jQuery处理由某些处理程序机制传递的事件参数的问题，而不是由其他人为您处理。它总是给你参数。
有些浏览器使用keyCode，其他浏览器使用which。 jQuery以which为标准化它。

所以：

$('#divID').on('keydown', function(e) {
    if (e.which == 40) {
        //do something when the down arrow key is pressed.
    }
});

更多：on，the event object

对于div接收按键，至少在某些浏览器上，它需要是或具有交互式内容（例如，它需要有input，或者是contenteditable或类似的。

使用contenteditable div

＆＃13;

$('#divID').on('keydown', function(e) {
  if (e.which == 40) {
    //do something when the down arrow key is pressed.
    $("<p>").text("down arrow").appendTo(document.body);
    return false;
  }
});

＆＃13;

<div id="divID" contenteditable>Click here to ensure the div has focus, then press the down arrow</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

或者，在document.body（或document）上捕获keydown事件：

document.body的实时示例：

＆＃13;

$(document.body).on('keydown', function(e) {
  if (e.which == 40) {
    //do something when the down arrow key is pressed.
    $("<p>").text("down arrow").appendTo(document.body);
    return false;
  }
});

＆＃13;

<div id="divID">Click here to ensure the document has focus, then press the down arrow</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

.addEventListener查询

2 个答案: