Implementierung von jQuery "live" - binder mit nativem Javascript

Ich versuche herauszufinden, wie das binden einer Veranstaltung zu dynamisch erstellten Elementen. Ich brauche das event zu bestehen auf das element selbst nachdem es zerstört ist und regeneriert werden.

Offensichtlich mit jQuery-live-Funktion, die leicht, aber was würden Sie Aussehen, umgesetzt mit nativen Javascript?

Man konnte immer Lesen Sie die jQuery-Quelle :p. Nicht sicher, wie weit wäre es von native JS-obwohl, da bin ich mir sicher, es wird ganz stark davon abhängen, sich von diesem Punkt (in Bezug auf die Verwendung von Selektoren und so weiter).
Nur ein Hinweis: .live() veraltet ist, für eine lange, lange Zeit. Es wurde ersetzt durch .delegate() wurde ersetzt durch .on(), so nutzen Sie bitte die Letzte. Außerdem, das Letzte zeigt den Unterschied zwischen Bindung und delegieren, so möchten Sie vielleicht zu schauen. Das wichtigste ist die Kontrolle für das event-target.
Diese Antwort von mir vielleicht helfen, stackoverflow.com/a/27373951/1385441

InformationsquelleAutor jjhenry | 2012-02-02

23

Hier ein einfaches Beispiel:
```
function live(eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        if (event.target.id === elementId) {
            cb.call(event.target, event);
        }
    });
}

live("click", "test", function (event) {
    alert(this.id);
});
```
Die grundlegende Idee ist, dass Sie möchten, fügen Sie einen Ereignis-handler, um das Dokument und lassen Sie die event-Blase bis der DOM. Dann prüfen Sie das event.target Eigenschaft, um zu sehen, ob Sie mit den gewünschten Kriterien (in diesem Fall nur, dass die id des Elements).

Edit:

@shabunc vor ein ziemlich großes problem mit meiner Lösung-die Ereignisse auf die Kind-Elemente werden nicht korrekt erkannt. Eine Möglichkeit dieses Problem zu beheben, ist die Betrachtung der Vorfahren-Elemente zu sehen, ob die angegebenen id:
```
function live (eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        var el = event.target
            , found;

        while (el && !(found = el.id === elementId)) {
            el = el.parentElement;
        }

        if (found) {
            cb.call(el, event);
        }
    });
}
```
- Das Dokument oder - effizienter - der container außerhalb, von denen Sie nicht erwarten, dass Elemente von Ihrem Interesse.
- Das ist also das hören nur jedem click-Ereignis und beim click-Ereignis Auftritt, überprüft, ob die Ziel-id entspricht der angegebenen id oder nicht und das tun die callback-Funktion. Ziemlich Interessant 🙂
- Recht. Und wie @Tadeck weist darauf hin, begrenzen Sie die blubbernden zu einem anderen element enthalten, die für eine effizientere Zuhörer.
- Das funktioniert nicht mit Kindern DOM-Elemente, obwohl wir eigentlich betrachten dies als ein Gültiger Klick-Ereignis.
- Können Sie das noch näher erläutern? Vielleicht ein Beispiel geben?
- sicher, warum nicht. Hier ist, was ich Rede - jsfiddle.net/9hN22
- Ja, du hast absolut Recht. Eine Möglichkeit dieses Problem zu beheben, ist zu prüfen, Vorfahren und sehen, wenn Sie traf ein, die Spiele der id Sie angegeben haben. Ich werde aktualisieren, meine Antwort, um dies zu reflektieren.
- was ist, wenn der Selektor ist nicht die id, aber wie '.nav .aktiv'?
- Sie hätte etwas zu schreiben, analysiert diese Auswahl. Wenn Sie den Umgang mit komplexen Selektoren könnten Sie besser dran mit jQuery oder einem anderen framework.
InformationsquelleAutor Andrew Whitaker

Neben Andrew ' s post und Binyamin Kommentar, vielleicht ist das eine option:

Mit diesem können Sie 'nav .Punkt a' als Selektor.
Basierend auf Andrew ' s code.

function live (eventType, elementQuerySelector, cb) {
    document.addEventListener(eventType, function (event) {

        var qs = document.querySelectorAll(elementQuerySelector);

        if (qs) {
            var el = event.target, index = -1;
            while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) {
                el = el.parentElement;
            }

            if (index > -1) {
                cb.call(el, event);
            }
        }
    });
}



live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); });

Dank so viel. Eine Sache, die ich vorschlagen würde, ist allerdings suporting e.preventDefault() innen addEventListener. Wenn verwendet, dann müssen Sie ändern, um es zu document.querySelector(elementQuerySelector).addEventListener(eventType, function (event) { sonst wird es verhindern, dass Sie durch klicken auf andere Elemente auf der Seite

InformationsquelleAutor Ro NL

2

Alternative zu verbindlich, ein event dynamisch zu einem bestimmten element kann eine Globale event-listener. Also, jedes mal, wenn Sie aktualisieren Sie die DOM mit einem weiteren neuen element auf das element wird auch die "Fänge". Ein Beispiel:

JS:
```
var mybuttonlist = document.getElementById('mybuttonlist');

mybuttonlist.addEventListener('click', e=>{
  if(e.target.nodeName == 'BUTTON'){
    switch(e.target.name){
      case 'createnewbutton':
        mybuttonlist.innerHTML += '<li><button name="createnewbutton">Create new button</button></li>';
        break;
    }
  }
}, false);
```
CSS:
```
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
```
HTML:
```
<ul id="mybuttonlist">
  <li><button name="createnewbutton">Create new button</button></li>
</ul>
```
In diesem Beispiel habe ich einen Ereignis-listener auf die <ul> für click-Ereignisse. So ein Ereignis passiert, für alle child-Elemente. Von der einfachen event-handler, die ich erstellt habe, können Sie sehen, dass es einfach ist, mehr Logik, mehr buttons (mit verschiedenen oder sich wiederholende Namen), Anker etc.

Alles zu, man könnte hinzufügen der eventlistener zu dokumentieren, anstatt die Liste element, fangen alle click-events auf der Seite und dann Griff die click-events in der event-handler.
- Das ist eine Coole Idee! Aber ich würde eher data-event die keine semantische Bedeutung. Und fügen Sie einige Weg, um die event-Optionen. Für code wie diesem empfehle ich Vue.js verwaltet alle das Zeug für Euch 😉
InformationsquelleAutor chrwahl
2

Anderen Lösungen ein wenig zu kompliziert...
```
document.addEventListener('click', e => {
   if (e.target.closest('.element')) {
       //.element has been clicked
   }
}
```
Es ist ein polyfill in Fall, dass Sie brauchen, um Unterstützung für Internet Explorer oder alten Browsern.

InformationsquelleAutor Fabian von Ellerts

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.