Ausführliche Erklärung zur Verwendung der JavaScript-Ereignisbindung

Da HTML von oben nach unten geladen wird, fügen wir normalerweise, wenn wir eine Javascript-Datei in den Kopfbereich einfügen, das window.onload-Ereignis am Anfang des Javascripts ein, um Fehler bei DOM-Vorgängen beim Laden des Dokuments zu verhindern . . Wenn mehrere Javascript-Dateien vorhanden sind, ist es sehr wahrscheinlich, dass mehrere window.onload-Ereignisse auftreten, aber am Ende funktioniert nur eines. Zu diesem Zeitpunkt muss die Ereignisbindung verwendet werden, um dieses Problem zu lösen.

IE-Modus
attachEvent(Ereignisname, Funktion), Ereignisverarbeitungsfunktion binden
detachEvent(Ereignisname, Funktion), unbind

DOM-Modus
addEventListener (Ereignisname , Funktion, Erfassung)
removeEventListener(Ereignisname, Funktion, Erfassung)

Das Ergebnis der Ausführung dieses js-Codes ist, dass b angezeigt wird, weil zwei oBtn-Klickereignisse vorhanden sind, aber nur eines ausgeführt wird. Das letzte Erstens spiegelt dieses Mal die Bedeutung der Ereignisbindung wider.

Wenn Sie die Ereignisbindung verwenden, werden beide Klickereignisse ausgeführt, die Reihenfolge der Ausführung ist jedoch in verschiedenen Browsern unterschiedlich. Im IE wird es von unten nach oben ausgeführt, während es in anderen Browsern von oben nach unten ausgeführt wird. Aufgrund der Besonderheit von Alert können wir jedoch im Grunde keinen Unterschied erkennen Einige Leute haben strenge Zeitanforderungen. Sie müssen bei der Verwendung von Ereignissen dennoch aufpassen. In einem früheren Artikel führte beispielsweise der geringfügige Zeitunterschied zwischen setInterval im Bildkarussell schließlich zu einem Scroll-Chaos. Bildkarussell-Domo basierend auf nativem Javascript

Organisieren Sie unseren Code schließlich in Funktionen, um die spätere Verwendung zu erleichtern

function myAddEvent(obj, ev, fn)
{
  if(obj.attachEvent)
  {
    obj.attachEvent('on'+ev, fn);
  }
  else
  {
    obj.addEventListener(ev, fn, false);
  }
}

Wenn Sie zu diesem Zeitpunkt mehrere window.onload-Ereignisse verwenden müssen, reicht es eigentlich nur aus Verwenden Mehrere oBtn.onclick-Ereignisse reichen fast aus. Rufen Sie die Funktion einfach wie folgt auf.

myAddEvent(window,'load',function ()
{
  alert('a');
});
myAddEvent(window,'load',function ()
{
  alert('b');