Was ist der Unterschied zwischen addEventListenerund onclick?

  var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);  

Beide sind korrekt, aber keiner von ihnen ist per se "am besten", und es kann einen Grund geben, warum der Entwickler beide Ansätze gewählt hat.

Ereignis-Listener (addEventListener und IE's attachEvent)

Frühere Versionen von Internet Explorer implementieren Javascript anders als so ziemlich jeder andere Browser. Bei Versionen unter 9 verwenden Sie die attachEvent[ doc ] -Methode wie folgt:

element.attachEvent('onclick', function() {
/* do stuff here*/ 
});

In den meisten anderen Browsern (einschließlich IE 9 und höher) verwenden Sie addEventListener[ doc ] wie folgt:

element.addEventListener('click', function() {
/* do stuff here*/ 
}, false); 
    

    

Mit diesem Ansatz ( DOM Level 2-Ereignisse ) können Sie jedem einzelnen Element eine theoretisch unbegrenzte Anzahl von Ereignissen zuordnen. Die einzige praktische Einschränkung ist der clientseitige Speicher und andere Leistungsprobleme, die für jeden Browser unterschiedlich sind.

Die obigen Beispiele zeigen die Verwendung einer anonymen Funktion [ doc ]. Sie können einen Ereignis-Listener auch mithilfe einer Funktionsreferenz [ doc ] oder eines Abschlusses [ doc ] hinzufügen :

    
   var myFunctionReference = function() {
   /* do stuff here*/
   } 
   var myFunctionReference = function() { 
   /* do stuff here*/ 
   } 
   element.attachEvent('onclick', myFunctionReference); 
   element.addEventListener('click', myFunctionReference , false); 

Ein weiteres wichtiges Merkmal von addEventListenerist der letzte Parameter, der steuert, wie der Listener auf sprudelnde Ereignisse reagiert [ doc ]. Ich habe in den Beispielen false übergeben, was für wahrscheinlich 95% der Anwendungsfälle Standard ist. Es gibt kein gleichwertiges Argument für attachEventoder bei Verwendung von Inline-Ereignissen.

Inline-Ereignisse (HTML onclick = "" property und element.onclick)

In allen Browsern, die Javascript unterstützen, können Sie einen Ereignis-Listener inline setzen, dh direkt im HTML-Code. Sie haben wahrscheinlich Folgendes gesehen:

<a id="testing" href="#" onclick="alert('did stuff inline');"a>Click me</a>

Die meisten erfahrenen Entwickler meiden diese Methode, aber sie erledigt den Job. es ist einfach und direkt. Sie dürfen hier keine Schließungen oder anonymen Funktionen verwenden (obwohl der Handler selbst eine Art anonyme Funktion ist), und Ihre Kontrolle über den Umfang ist begrenzt.

Die andere Methode, die Sie erwähnen:

element. onclick = function () { /*do stuff here */ };
    

... entspricht Inline-Javascript, außer dass Sie mehr Kontrolle über den Bereich haben (da Sie ein Skript anstelle von HTML schreiben) und anonyme Funktionen, Funktionsreferenzen und / oder Abschlüsse verwenden können.

Der wesentliche Nachteil bei Inline-Ereignissen besteht darin, dass im Gegensatz zu den oben beschriebenen Ereignis-Listenern möglicherweise nur ein Inline-Ereignis zugewiesen ist. Inline-Ereignisse werden als Attribut / Eigenschaft des Elements [ doc ] gespeichert , was bedeutet, dass es überschrieben werden kann.

Verwenden Sie das Beispiel <a>aus dem obigen HTML:

var element = document.getElementById('testing'); 
element.onclick = function () {
alert('did stuff #1');
};
element.onclick = function () { 
alert('did stuff #2');
};

... wenn Sie auf das Element geklickt haben, wird nur "Did stuff # 2" angezeigt. Sie haben die erste zugewiesene onclickEigenschaft mit dem zweiten Wert überschrieben und auch die ursprüngliche Inline-HTML- onclickEigenschaft. Überprüfen Sie es hier: http://jsfiddle.net/jpgah/ .

Grob gesagt, verwenden Sie keine Inline - Events . Es kann bestimmte Anwendungsfälle dafür geben, aber wenn Sie nicht 100% sicher sind, dass Sie diesen Anwendungsfall haben, verwenden Sie keine Inline-Ereignisse und sollten diese auch nicht verwenden.

Modernes Javascript (Angular und dergleichen)

Seit diese Antwort ursprünglich veröffentlicht wurde, sind Javascript-Frameworks wie Angular weitaus beliebter geworden. Sie sehen Code wie diesen in einer Angular-Vorlage:

   <button (click)="doSomething()">Do Something</button> 
    

Dies sieht aus wie ein Inline-Ereignis, ist es aber nicht. Diese Art von Vorlage wird in komplexeren Code umgewandelt, der Ereignis-Listener hinter den Kulissen verwendet. Alles, was ich hier über Ereignisse geschrieben habe, gilt immer noch, aber Sie werden durch mindestens eine Ebene aus dem Kern entfernt. Sie sollten die Grundlagen verstehen, aber wenn Ihre modernen Best Practices für JS-Frameworks das Schreiben dieser Art von Code in eine Vorlage beinhalten, haben Sie nicht das Gefühl, dass Sie ein Inline-Ereignis verwenden - das sind Sie nicht.

Welches das Beste ist?

Die Frage ist eine Frage der Browserkompatibilität und der Notwendigkeit. Müssen Sie einem Element mehr als ein Ereignis hinzufügen? Wirst du in der Zukunft? Die Chancen stehen gut, Sie werden. attachEvent und addEventListener sind erforderlich. Wenn nicht, scheint ein Inline-Ereignis den Trick zu tun, aber Sie sollten sich besser auf eine Zukunft vorbereiten, die, obwohl dies unwahrscheinlich erscheint, zumindest vorhersehbar ist. Es besteht die Möglichkeit, dass Sie zu JS-basierten Ereignis-Listenern wechseln müssen. Sie können also auch einfach dort beginnen. Verwenden Sie keine Inline-Ereignisse.

jQuery und andere Javascript-Frameworks kapseln die verschiedenen Browser-Implementierungen von DOM Level 2-Ereignissen in generischen Modellen, sodass Sie browserübergreifenden Code schreiben können, ohne sich über den Verlauf des IE als Rebell Gedanken machen zu müssen. Gleicher Code mit jQuery, alle browserübergreifend und bereit zum Rocken:

    
   $(element).on('click', function () { /* do stuff */ }); 

Gehen Sie jedoch nicht aus und erhalten Sie einen Rahmen nur für diese eine Sache. Sie können ganz einfach Ihr eigenes kleines Dienstprogramm rollen, um sich um die älteren Browser zu kümmern:

    
    function addEvent(element, evnt, funct){
    if (element.attachEvent) return element.attachEvent('on'+evnt, funct);
    else
    return element.addEventListener(evnt, funct, false);
    } 
    example addEvent( document.getElementById('myElement'), 'click', function () {
    alert('hi!'); 
    }
    );

Probieren Sie es aus: http://jsfiddle.net/bmArj/

Unter Berücksichtigung all dessen addEventListenerwürde der verwendete Teil in IE-Versionen unter 9 nicht funktionieren , es sei denn, das Skript, das Sie sich ansehen, berücksichtigt die Browserunterschiede auf andere Weise (in Code, der in Ihrer Frage nicht gezeigt wird) .

Der Unterschied, den Sie sehen könnten, wenn Sie noch ein paar Funktionen hätten:

    
    var h = document.getElementById('a');
    h.onclick = doThing_1; h.onclick = doThing_2;
    h.addEventListener('click', doThing_3);
    h.addEventListener('click', doThing_4);

Die Funktionen 2, 3 und 4 funktionieren, 1 jedoch nicht. Dies liegt daran, addEventListenerdass vorhandene Ereignishandler nicht überschrieben werden, während onclickvorhandene onclick = fnEreignishandler überschrieben werden .

Der andere wesentliche Unterschied besteht natürlich darin, dass er onclickimmer funktioniert, während addEventListenerer in Internet Explorer vor Version 9 nicht funktioniert. Sie können die analoge attachEvent(mit etwas anderer Syntax) in IE <9 verwenden.

In dieser Antwort werden drei Methoden zum Definieren von DOM-Ereignishandlern beschreiben.

element.addEventListener()

Codebeispiel:

    const element = document.querySelector('a');
    element.addEventListener('click', event => event.preventDefault(), true);
    

    
    <a href="//google.com">Try clicking this link.</a>

element.addEventListener() hat mehrere Vorteile:

• Ermöglicht es Ihnen, unbegrenzte Ereignishandler zu registrieren und mit zu entfernen element.removeEventListener().
• Hat einen useCaptureParameter, der angibt, ob Sie ein Ereignis in der Erfassungs- oder Blasenphase behandeln möchten . Siehe: Das useCapture-Attribut in addEventListener kann nicht verstanden werden .
• Kümmert sich um Semantik . Grundsätzlich wird die Registrierung von Ereignishandlern expliziter. Für einen Anfänger macht ein Funktionsaufruf deutlich, dass etwas passiert , während das Zuweisen eines Ereignisses zu einer Eigenschaft des DOM-Elements zumindest nicht intuitiv ist.
• Ermöglicht die Trennung von Dokumentstruktur (HTML) und Logik (JavaScript) . In winzigen Webanwendungen scheint es nicht wichtig zu sein, aber es spielt bei jedem größeren Projekt eine Rolle. Es ist viel einfacher, ein Projekt zu pflegen, das Struktur und Logik trennt, als ein Projekt, das dies nicht tut.
• Beseitigt Verwechslungen mit korrekten Ereignisnamen. Aufgrund der Verwendung von Inline-Ereignis-Listenern oder der Zuweisung von Ereignis-Listenern zu .oneventEigenschaften von DOM-Elementen denken viele unerfahrene JavaScript-Programmierer, dass der Ereignisname beispielsweise onclickoder lautet onload. onist kein Teil des Ereignisnamens . Richtige Ereignisnamen sind clickund load, und so werden Ereignisnamen an übergeben .addEventListener().
• Funktioniert in fast allen Browsern . Wenn Sie IE <= 8 weiterhin unterstützen müssen, können Sie eine Polyfüllung aus MDN verwenden .

element.onevent = function() {}(z onclick, onload)

Codebeispiel:

const element = document.querySelector('a');
element.onclick = event => event.preventDefault();

<a href="//google.com">Try clicking this link.</a>

Dies war eine Möglichkeit, Ereignishandler in DOM 0 zu registrieren. Es wird jetzt davon abgeraten, weil:

• Ermöglicht die Registrierung nur eines Ereignishandlers. Das Entfernen des zugewiesenen Handlers ist auch nicht intuitiv, da Sie zum Entfernen des mit dieser Methode zugewiesenen Ereignishandlers die oneventEigenschaft auf ihren ursprünglichen Zustand (dh null) zurücksetzen müssen .
• Reagiert nicht angemessen auf Fehler . Wenn Sie beispielsweise versehentlich eine Zeichenfolge zuweisen window.onload, zum Beispiel window.onload = "test";:, werden keine Fehler ausgegeben. Ihr Code würde nicht funktionieren und es wäre wirklich schwer herauszufinden, warum. .addEventListener()würde jedoch einen Fehler auslösen (zumindest in Firefox): TypeError: Argument 2 von EventTarget.addEventListener ist kein Objekt .
• Bietet keine Möglichkeit zur Auswahl, ob Sie ein Ereignis in der Erfassungs- oder Blasenphase behandeln möchten.

Inline-Ereignishandler ( oneventHTML-Attribut)

Codebeispiel:

<a href="//google.com" onclick="event.preventDefault();">Try clicking this link.</a>

Ähnlich wie element.oneventes ist jetzt entmutigt. Neben den Problemen, die es element.oneventhat, ist es:

• Ist ein potenzielles Sicherheitsproblem , da es XSS viel schädlicher macht. Heutzutage sollten Websites einen geeigneten Content-Security-PolicyHTTP-Header senden , um Inline-Skripte zu blockieren und externe Skripte nur von vertrauenswürdigen Domänen zuzulassen. Siehe Wie funktioniert die Inhaltssicherheitsrichtlinie?
• Trennt Dokumentstruktur und Logik nicht .
• Wenn Sie Ihre Seite mit einem serverseitigen Skript generieren und beispielsweise hundert Links mit jeweils demselben Inline-Ereignishandler generieren, ist Ihr Code viel länger als wenn der Ereignishandler nur einmal definiert wurde. Das bedeutet, dass der Client mehr Inhalte herunterladen müsste und Ihre Website daher langsamer wäre.

Zusammenfassung:

1. addEventListenerkann mehrere Ereignisse hinzufügen, während onclickdies nicht möglich ist.
2. onclickkann als HTMLAttribut hinzugefügt werden, während ein addEventListenernur innerhalb von <script>Elementen hinzugefügt werden kann.
3. addEventListener kann ein drittes Argument annehmen, das die Ereignisausbreitung stoppen kann.

Beide können zur Behandlung von Ereignissen verwendet werden. Sollte addEventListenerjedoch die bevorzugte Wahl sein, da es alles kann onclick und mehr. Verwenden Sie Inline nicht onclickals HTML-Attribute, da dies das Javascript und das HTML vermischt, was eine schlechte Praxis ist. Dies macht den Code weniger wartbar.

Ein Detail wurde noch nicht bemerkt: Moderne Desktop-Browser betrachten unterschiedliche Tastendrücke als "Klicks" für AddEventListener('click'und onclickstandardmäßig.

• Bei Chrome 42 und IE11 beide onclickund AddEventListenerklicken Sie mit der linken und mittleren Maustaste auf Feuer.
• Auf 38 Firefox, onclickfeuert nur auf der linken Maustaste, aber AddEventListenerklicken Feuer auf links, Mitte und rechts Klicks.

Außerdem ist das Verhalten bei mittleren Klicks in allen Browsern sehr inkonsistent, wenn Bildlaufcursor beteiligt sind:

• In Firefox werden Ereignisse mit mittlerem Klick immer ausgelöst.
• In Chrome werden sie nicht ausgelöst, wenn der mittlere Klick einen Bildlaufcursor öffnet oder schließt.
• Im IE werden sie ausgelöst, wenn der Bildlaufcursor geschlossen wird, nicht jedoch, wenn er geöffnet wird.

Es ist auch erwähnenswert, dass "Klick" -Ereignisse für jedes über die Tastatur auswählbare HTML-Element, z. B. inputauch auf Leerzeichen ausgelöst oder eingegeben werden, wenn das Element ausgewählt wird.

Javascript neigt dazu, alles in Objekte zu mischen, und das kann es verwirrend machen. Alles in einem ist der JavaScript-Weg.

Im Wesentlichen ist onclick ein HTML-Attribut. Umgekehrt ist addEventListener eine Methode für das DOM-Objekt, die ein HTML-Element darstellt.

In JavaScript-Objekten ist eine Methode lediglich eine Eigenschaft, die eine Funktion als Wert hat und gegen das Objekt arbeitet, an das sie angehängt ist (z. B. mit diesem).

In JavaScript als HTML-Element, das durch DOM dargestellt wird, werden die Attribute seinen Eigenschaften zugeordnet.

Hier werden die Leute verwirrt, weil JavaScript alles in einem einzigen Container oder Namespace ohne Indirektionsebene verschmilzt.

In einem normalen OO-Layout (das zumindest den Namespace von Eigenschaften / Methoden zusammenführt) könnten Sie Folgendes haben:

domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))

Es gibt Variationen, wie es einen Getter / Setter für Onload oder HashMap für Attribute verwenden könnte, aber letztendlich würde es so aussehen. JavaScript beseitigte diese Indirektionsebene in der Erwartung, unter anderem zu wissen, was was ist. DomElement und Attribute wurden zusammengeführt.

Vorbehaltlich der Kompatibilität sollten Sie als Best Practice addEventListener verwenden. Wenn andere Antworten eher über die diesbezüglichen Unterschiede als über die grundlegenden programmatischen Unterschiede sprechen, werde ich darauf verzichten. Im Grunde genommen sollten Sie in einer idealen Welt eigentlich nur * aus HTML verwenden, aber in einer noch idealeren Welt sollten Sie so etwas nicht aus HTML heraus tun.

Warum ist es heute dominant? Es ist schneller zu schreiben, leichter zu lernen und funktioniert meistens nur.

Der springende Punkt beim Onload in HTML besteht darin, zunächst Zugriff auf die Methode oder Funktionalität von addEventListener zu gewähren. Wenn Sie es in JS verwenden, durchlaufen Sie HTML, wenn Sie es direkt anwenden könnten.

Hypothetisch können Sie Ihre eigenen Attribute erstellen:

$('[myclick]').each(function(i, v) {
     v.addEventListener('click', function() {
         eval(v.myclick); // eval($(v).attr('myclick'));
     });
});

Was JS damit macht, ist etwas anders.

Sie können es mit etwas gleichsetzen (für jedes erstellte Element):

element.addEventListener('click', function() {
    switch(typeof element.onclick) {
          case 'string':eval(element.onclick);break;
          case 'function':element.onclick();break;
     }
});

Die tatsächlichen Implementierungsdetails werden sich wahrscheinlich durch eine Reihe subtiler Variationen unterscheiden, wodurch sich die beiden in einigen Fällen geringfügig unterscheiden, aber das ist der Kern davon.

Es ist wohl ein Kompatibilitäts-Hack, dass Sie eine Funktion an ein on-Attribut anheften können, da standardmäßig alle Zeichenfolgen Zeichenfolgen sind.

Laut MDN ist der Unterschied wie folgt:

addEventListener:

Die EventTarget.addEventListener () -Methode fügt das angegebene EventListener-kompatible Objekt zur Liste der Ereignis-Listener für den angegebenen Ereignistyp in dem EventTarget hinzu, für das es aufgerufen wird. Das Ereignisziel kann ein Element in einem Dokument, das Dokument selbst, ein Fenster oder ein anderes Objekt sein, das Ereignisse unterstützt (z. B. XMLHttpRequest).

onclick:

Die onclick-Eigenschaft gibt den Klickereignishandlercode für das aktuelle Element zurück. Wenn Sie das Klickereignis zum Auslösen einer Aktion verwenden, sollten Sie auch erwägen, dieselbe Aktion zum Keydown-Ereignis hinzuzufügen, damit Personen, die keine Maus oder keinen Touchscreen verwenden, dieselbe Aktion verwenden können. Syntax element.onclick = functionRef; Dabei ist functionRef eine Funktion - häufig ein Name einer an anderer Stelle deklarierten Funktion oder ein Funktionsausdruck. Weitere Informationen finden Sie im "JavaScript-Handbuch: Funktionen".

Es gibt auch einen Syntaxunterschied bei der Verwendung, wie Sie in den folgenden Codes sehen:

addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

Wenn Sie sich keine Sorgen um die Browserunterstützung machen, können Sie die Referenz 'this' in der vom Ereignis aufgerufenen Funktion erneut binden. Normalerweise zeigt es auf das Element, das das Ereignis generiert hat, wenn die Funktion ausgeführt wird, was nicht immer das ist, was Sie wollen. Der schwierige Teil besteht darin, gleichzeitig denselben Ereignis-Listener entfernen zu können, wie in diesem Beispiel gezeigt: http://jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

Der obige Code funktioniert gut in Chrome, und es gibt wahrscheinlich einige Probleme damit, "Binden" mit anderen Browsern kompatibel zu machen.

Die Verwendung von Inline-Handlern ist nicht mit der Inhaltssicherheitsrichtlinie kompatibel, sodass der addEventListenerAnsatz unter diesem Gesichtspunkt sicherer ist. Natürlich können Sie die Inline-Handler mit aktivieren, unsafe-inlineaber wie der Name schon sagt, ist dies nicht sicher, da es die ganzen Horden von JavaScript-Exploits zurückbringt, die CSP verhindert.

Es sollte auch möglich sein, den Listener entweder durch Prototyping zu erweitern (wenn wir einen Verweis darauf haben und es sich nicht um eine anonyme Funktion handelt) oder den Aufruf "onclick" einen Aufruf einer Funktionsbibliothek (eine Funktion, die andere Funktionen aufruft) durchzuführen.

mögen

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

Dies bedeutet, dass wir den Onclick-Aufruf niemals ändern müssen, sondern nur die Funktion myFunctionList () ändern müssen, um zu tun, was immer wir wollen. Dies lässt uns jedoch ohne Kontrolle über die Blasen- / Fangphasen, sodass dies für neuere Browser vermieden werden sollte.

Nur für den Fall, dass jemand diesen Thread in Zukunft findet ...

element.onclick = function () {/ * mache Sachen * /}

element.addEventListener ('click', function () {/ * do stuff * /}, false);

Sie tun anscheinend dasselbe: Warten Sie auf das Klickereignis und führen Sie eine Rückruffunktion aus. Trotzdem sind sie nicht gleichwertig. Wenn Sie jemals zwischen den beiden wählen müssen, kann dies Ihnen helfen, herauszufinden, welches das beste für Sie ist.

Der Hauptunterschied besteht darin, dass onclick nur eine Eigenschaft ist und wie alle Objekteigenschaften überschrieben wird, wenn Sie mehr als einmal darauf schreiben . Mit addEventListener () können wir stattdessen einfach einen Ereignishandler an das Element binden und ihn jedes Mal aufrufen, wenn wir ihn benötigen, ohne uns um überschriebene Eigenschaften sorgen zu müssen. Beispiel wird hier gezeigt,

Probieren Sie es aus: https://jsfiddle.net/fjets5z4/5/

Erstens war ich versucht, weiterhin onclick zu verwenden, weil es kürzer ist und einfacher aussieht… und tatsächlich ist es das auch. Aber ich empfehle es nicht mehr. Es ist wie mit Inline-JavaScript. Die Verwendung von so etwas wie Inline-JavaScript wird heutzutage dringend empfohlen (Inline-CSS wird ebenfalls nicht empfohlen, aber das ist ein anderes Thema).

Die Funktion addEventListener () funktioniert jedoch, obwohl sie der Standard ist, in alten Browsern (Internet Explorer unter Version 9) nicht, und dies ist ein weiterer großer Unterschied. Wenn Sie diese alten Browser unterstützen müssen, sollten Sie dem Onclick-Weg folgen. Sie können aber auch jQuery (oder eine seiner Alternativen) verwenden: Es vereinfacht grundsätzlich Ihre Arbeit und verringert die Unterschiede zwischen den Browsern. Dadurch können Sie viel Zeit sparen.

var clickEvent = document.getElementByID("onclick-eg");
var EventListener = document.getElementByID("addEventListener-eg");

clickEvent.onclick = function(){
    window.alert("1 is not called")
}
clickEvent.onclick = function(){
    window.alert("2 is not called")
}

EventListener.addEventListener("click",function(){
    window.alert("1 is called")
})
EventListener.addEventListener("click",function(){
    window.alert("2 is also called")
})

addEventListener Mit dieser Option können Sie mehrere Handler festlegen, die jedoch in IE8 oder niedriger nicht unterstützt werden.

IE hat attachEvent, aber es ist nicht genau das gleiche.