ドキュメントのCSSセレクタ

Question

セレクタ（JQuery、プレーンJavaScriptなど）でドキュメントを選択する方法は？

私は、ユーザーがキー「Enter」（13）をドキュメントのどこに押してもリスンするイベントリスナーに基づいてイベントをトリガーしたいと思います。

私は私のアプリのすべてのイベントをリッスンするように、この特定の機能を使用しています：

export function listen(eventName, selector, handler) { 
    document.body.addEventListener(eventName, event => { 
     if(event.target.matches(selector)) { 
      return handler(event); 
     } 
    }); 
} 

Answer 1

あなたはそのためのセレクタを必要としません。あなたはいつもdocumentでそれを参照しています。

document.addEventListener("keypress", handler); 

あなたがHTML要素が必要な場合は、"html"セレクタを使用することができます。

document.querySelector("html").addEventListener(...) 

またはdocument.documentElementを使用してください。

document.documentElement.addEventListener(...) 

---

そして@cepharumが述べたように、あなたは$関数に要素またはセレクタを渡すことによって、jQueryを使って同じことを行うことができます。 documentが常に利用可能である間、体が完全にロードされるまで

---

あなたの更新の質問にいくつかの注意は、document.bodyはそうではありません。代わりにdocumentを使用できるはずです。

また、イベントハンドラにreturn文があります。それは何か有用なことをするつもりはありません。戻り値は無視されます。

最後に、ユーザーがドキュメント内のどこかのキーを押したときにコールする必要がある場合は、コールバックを一致するセレクタに制限したいとは思われません。それは干渉するように見えるだけです。

---

セレクタベースのイベント委任を希望する場合は、ほとんどの場合です。 event.targetの親ノードを通過してセレクタと一致するものがあるかどうかを確認し、それらに対してハンドラを実行したいと思う可能性が最も高いでしょう。

export function listen(eventName, selector, handler) { 
    document.body.addEventListener(eventName, event => { 
     var el = event.target; 
     do { 
      if (el.matches(selector)) { 
      handler(event); 
      } 
     } while((el = el.parentNode)); 
    }); 
} 

あなただけそれがhandler呼び出しの後returnかbreakを追加し、最初に見つかったマッチのために解雇したい場合。

Answer 2

汎用関数のリスナーへの変更を防ぐため、セレクタとして 'body'を使用しました。

listen('keypress', 'body', event => { 
    event.preventDefault(); 
    if (event.keyCode === 13) { 
    const todoInput = document.getElementById('todoInput'); 
    todos.dispatch(addTodo(todoInput.value)); 
    } 
});