Question

在处理键盘事件时，我意识到并非所有元素都能获得事件目标。例如，当向一个没有键盘焦点（“p”元素）的元素添加处理程序时，如下所示，当然，当我按下键盘时，什么都不会发生。

但是，如果我通过整个文档更改“p”元素来添加该键盘事件（假设我将代码更改为 document.keydown = myFunction; ），那么代码运行良好。当我在某处读到时，这是因为键盘事件发生在文档中的某个位置，然后向文件元素移动。那么你能告诉我这个事件在文件中的位置吗？这是代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>    
<p id = 'myId'>Some Text</p>

<script>

function myFunction(e)
{
var x=e.keyCode;
var keychar=String.fromCharCode(x);
alert("Key " + keychar + " was pressed down");
}
var myEl = document.getElementById('myId');
myEl.onkeydown = myFunction;

</script>
</body>
</html>

谢谢！

Answer 1

向文档元素添加onkeydown事件处理程序的工作原理不应被视为事件正在冒泡到文档元素的指示。

基本上，该指令告诉浏览器的是“当用户正在查看此页面时，使用此功能响应任何keydown事件”。

如果您在文档中输入了文本并输入了该输入，那么您的处理程序仍然会以相同的方式做出反应，而然后可以说事件正在从该元素冒出来任何包含元素直到文档级别的元素。但是如果没有这样的元素 - 即一个用于对键输入事件作出反应的元素 - 你的keydown事件发生在文档的层面，而不是下面。

Answer 2

我不确定您的确切问题是什么，但如果您想查找原始元素，请使用e.target。

function myFunction(e) {
  var x=e.keyCode;
  var keychar=String.fromCharCode(x);
  alert("Key " + keychar + " was pressed down");
  alert("Target: " + e.target);
}

document.onkeydown = myFunction;

查看当前小提琴，尝试在输入框中输入内容。您将看到目标更改为输入。 http://jsfiddle.net/BqWU7/

键盘事件目标元素

2 个答案: