CSS-Selektor für Dokument

Question

Wie wählt man das Dokument mit Selektoren (JQuery, plain JavaScript etc ...)?

Ich möchte ein Ereignis auszulösen, basierend auf einem Ereignis-Listener, die hören, wenn ein Benutzer Taste ‚Enter‘ (13) überall in dem Dokument.

Ich verwende diese spezielle Funktion für alle Veranstaltungen in meiner App zu hören:

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

Answer 1

Sie brauchen keinen Wähler dafür. Sie haben immer einen Verweis darauf über document.

document.addEventListener("keypress", handler); 

Wenn Sie das HTML Element möchten, können Sie den "html" Selektor verwenden.

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

Oder einfach document.documentElement verwenden.

document.documentElement.addEventListener(...) 

---

Und wie @cepharum erwähnt, können Sie das gleiche mit jQuery tun, indem das Element oder Wähler auf die $ Funktion übergeben.

---

Einige Hinweise auf Ihre Frage aktualisiert, während document immer zur Verfügung steht, ist document.body wahrscheinlich nicht, bis der Körper vollständig geladen ist. Sie sollten stattdessen document verwenden können.

Außerdem haben Sie eine return-Anweisung in Ihren Event-Handler. Das wird nichts nützliches tun. Der Rückgabewert wird ignoriert.

Schließlich ist es scheint nicht, wie Sie den Rückruf zu einem passenden Wähler begrenzen wollen, wenn sie abgefeuert werden sollen, wenn der Benutzer den Schlüssel irgendwo im Dokument drückt. Das scheint einfach so zu sein.

---

Wenn Sie eine delegatorbasierte Ereignisdelegierung planen, sind Sie fast da. Sie werden wahrscheinlich höchstwahrscheinlich die übergeordneten Knoten von event.target durchlaufen, um zu sehen, welche mit dem Selektor übereinstimmen, und dann den Handler für sie ausführen.

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)); 
    }); 
} 

Wenn Sie wollen, dass es nur für das erste Spiel schießen gefunden, fügt return oder break nach dem handler Aufruf.

Answer 2

Um Modifikation der generische Funktion zu verhindern hören, habe ich einfach verwendet ‚Körper‘ als Selektor.

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