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イベントハンドラーをドキュメント要素に追加することが機能するという事実は、必ずしもイベントがドキュメント要素にバブリングしていることを示すものと見なされるべきではありません。

基本的に、その指示がブラウザに伝えているのは、「ユーザーがこのページを表示しているときに、この関数を使用してキーダウンイベントに応答する」ことです。

ドキュメント内にテキスト入力があり、その入力を入力した場合でも、ハンドラーは同じように反応します。その場合、イベントはその要素から、含まれている要素を介して、ドキュメント。しかし、そのような要素（つまり、キー入力イベントに反応することを目的とした要素）がないと、キーダウンイベントはドキュメントのレベルで発生します。

于 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 に答える