8

Javascriptでイベントを「転送」する簡単な方法はありますか？ここでの私の最終的な目的は、次の方法でUIの応答性を強化することです。バックエンドデータベースにクエリを送信する単一の入力テキストフィールドを持つWebサイトがあります。入力フィールドにフォーカスがないときにユーザーがキーを押した場合、ドキュメントレベルでキープレスイベントをキャプチャして、入力フィールドに転送したいと思います。（これは、UIの応答性を高めるためのかなり一般的な方法のようです。たとえば、Googleはメインの検索サイトでこれを行います。）

したがって、次のようなテキスト入力フィールドがあります。

<input id="query" onkeydown="f(event)">

そして、私はこのようにイベントを転送しようとします：

function handler(ev)
{
    var query = document.getElementById("query");
    query.dispatchEvent(ev);
}

document.addEventListener("keydown", handler, false);

さて、とのクロスブラウザの問題を無視するaddEventListenerとdispatchEvent、これはこれらの機能の両方をサポートするFirefoxでも機能しません。Javascriptインタープリターは例外をスローします： Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"

それで、このようなイベントを転送することさえ可能ですか？または、を使用して新しいイベントを作成してinitKeyEventから、そのイベントを入力要素にディスパッチする必要がありますか？

4

3 に答える 3

3

キーボードイベントの例を次に示します。

HTMLファイル（index.html）：

<!DOCTYPE html>
<html>
    <head>
        <title>Stackoverflow</title>
        <script type="text/javascript" src="sof.js"> </script>
    </head>
    <body>
        <input id="query" onkeydown="f(event);"/>
    </body>
</html>

Javascriptファイル（sof.js）：

function simulateKeyDown () {
    // DOM Level 3 events
    var evt = document.createEvent ("KeyboardEvent");
    // DOM Level 3 events
    evt.initKeyboardEvent ("keydown", false, false, null, false, false, false, false, 0, 0);
    var query = document.getElementById ('query');
    query.dispatchEvent (evt);
}

window.onload = function () {
    document.addEventListener ('keydown', simulateKeyDown, false);
}

function f (ev) {
    console.log ('ciao');
}

ご覧のとおり、ウィンドウが読み込まれると、ドキュメントのキーダウンイベントに新しいハンドラーがアタッチされます。キーが押されると、新しいKeyboardEventイベントが作成され、初期化され（'keydown'を使用）、入力要素にディスパッチされます。はい、それは少し複雑で複雑ですが、それは機能します;）

詳細については：

  1. イベントの作成
  2. イベントinitKeyEvent
于 2012-05-14T16:55:09.263 に答える
1

転送についてはよくわかりませんが、できないと思います。それでも、最初の問題に対する私の解決策は

document.addEventListener("keydown", function(e) {
    if (e.target.oMatchesSelector("form *, fieldset *, input, textarea"))
        return; // Opera-specific, but I think you get the point of MatchesSelector
    if (e.metaKey || e.ctrlKey)
        return;
    if (e.keyCode < 46 || e.keyCode > 90)
        return;
    document.getElementById("query").focus();
}, false);

キーダウンイベントは文字入力に対応していないため、入力に焦点を合わせるとキーダウンで十分になります。キャラクターはキーアップで表示されます。

于 2012-05-14T16:37:50.367 に答える
1

@Bergiの回答をフォローアップすると、私にとって有効な解決策は、単にリダイレクトするfocusことです。そうすれば、イベントは目的の場所に移動します。例えば：

document.addEventListener('keydown', function(evt) {
    document.getElementById('query').focus();
}, false);

これにより、すべてのキーダウンイベントが要素にリダイレクトされますquery。

于 2017-03-03T05:31:43.527 に答える