1

在处理键盘事件时，我意识到并非所有元素都可以获取事件目标。例如，当向没有键盘焦点的元素（“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>

谢谢！

4

2 回答 2

2

将 onkeydown 事件处理程序添加到文档元素的事实并不一定表明该事件正在冒泡到文档元素。

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

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

于 2012-11-15T11:39:28.183 回答
-1

我不确定您的确切问题是什么，但如果您想找出原始元素，请使用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/

于 2012-11-15T11:29:52.830 回答