addEventListener vs onclick

Beide sind richtig, aber keine von Ihnen ist "am besten" per se, und es kann ein Grund sein, die Entwickler wählten zu verwenden beide Ansätze.

Ereignis-Listener (addEventListener und IE attachEvent)

Früheren Versionen von Internet Explorer implementieren, javascript anders als so ziemlich jeder andere browser. Mit Versionen kleiner als 9 ist, verwenden Sie die attachEvent [ doc ] - Methode, wie folgt aus:

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

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

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

Verwendung dieses Ansatzes (DOM Level 2 events), können Sie eine theoretisch unbegrenzte Anzahl von Veranstaltungen zu einem einzigen element. Die einzige praktische Begrenzung ist eine client-side-Speicher und andere Leistung betrifft, die sind unterschiedlich für jeden browser.

Die obigen Beispiele stellen die Verwendung einer anonymen Funktion[doc]. Sie können auch fügen Sie einen Ereignis-listener mithilfe der Funktion Referenz[doc] oder ein Verschluss[doc]:

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

Ein weiteres wichtiges Merkmal von addEventListener ist der Letzte parameter, der steuert, wie der Hörer reagiert auf bubbling-Ereignisse[doc]. Ich habe die übergabe von false in den Beispielen, die den standard für wahrscheinlich 95% der Anwendungsfälle. Es gibt kein gleichwertiges argument für attachEvent oder bei der Verwendung von inline-Veranstaltungen.

Inline-Veranstaltungen (HTML onclick="" - Eigenschaft und element.onclick)

In allen Browsern, die javascript unterstützen, können Sie einen Ereignis-listener inline, d.h. direkt in den HTML-code. Sie haben wahrscheinlich gesehen, diese:

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

Die meisten erfahrenen Entwickler meiden diese Methode, aber es hat den job zu erledigen; es ist einfach und direkt. Sie können nicht verwenden, closures oder anonyme Funktionen hier (obwohl der handler selbst ist eine anonyme Funktion, Arten) und Ihre Kontrolle beschränkt ist.

Die andere Methode, die Sie erwähnen:

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

... ist das äquivalent von inline-javascript-außer, dass Sie mehr Kontrolle über den Bereich (da bist du ein Drehbuch zu schreiben, anstatt HTML) und können anonyme Funktionen, Funktion, Referenzen, und/oder-Verschlüsse.

Den erheblichen Nachteil mit inline-events ist, dass im Gegensatz zu Ereignis-Listenern oben beschrieben, Sie kann nur ein inline-event zugeordnet. Inline-Ereignisse gespeichert als Attribut/Eigenschaft von element[doc], was bedeutet, dass es überschrieben werden kann.

Am Beispiel <a> aus der das obige HTML:

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

... , wenn Sie auf ein element geklickt, hättest du nur sehen "Hast Zeug #2" - Sie überschrieb die erste zugeordnet der onclick Eigenschaft mit dem zweiten Wert, und Sie überschrieb die original-inline-HTML - onclick Eigenschaft zu. Check it out hier: http://jsfiddle.net/jpgah/.

Welcher ist der Beste?

Die Frage ist eine Frage der browser-Kompatibilität und Notwendigkeit. Tun Sie gerade brauchen Anhängen mehr als ein Ereignis an ein element? Wird Sie in der Zukunft? Quoten sind, werden Sie. attachEvent und addEventListener notwendig sind. Wenn nicht, ein inline-event wird den trick tun.

jQuery und anderen javascript frameworks Kapseln die verschiedenen browser-Implementierungen von DOM level 2 events in generischen Modellen, so dass Sie schreiben können, cross-browser-kompatiblen code, ohne sich sorgen über IE Geschichte als Rebell. Den gleichen code mit jQuery, cross-browser-und ready to rock:

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

Laufen nicht aus und bekommen einen Rahmen, die nur für diese eine Sache. Sie können leicht Rollen Sie Ihre eigenen kleinen Tools kümmern sich um die älteren Browser:

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/

Nimmt man all das in Betracht, es sei denn, das Skript, das Sie suchen, nahm der browser Unterschiede berücksichtigt werden auf andere Art (im code nicht gezeigt in deiner Frage), das Teil mit addEventListener würde nicht funktionieren in IE-Versionen kleiner als 9.

Dokumentations-und Verwandte Lesen

• W3-HTML-Spezifikation-element-Event-Handler-Attribute
• element.addEventListener auf MDN
• element.attachEvent auf der MSDN-Website
• Jquery.auf
• quirksmode blog "Einführung in die Ereignisse"
• CDN-gehostete javascript-Bibliotheken bei Google

InformationsquelleAutor der Antwort Chris Baker

Während onclick funktioniert in allen Browsern, addEventListener funktioniert nicht in älteren Versionen von Internet Explorer, die verwendet attachEvent statt.

Den Nachteil onclick ist, dass es nur einen event-handler, während die beiden anderen feuern, alle registrierten callbacks.

InformationsquelleAutor der Antwort Magnar

Wenn Sie nicht allzu besorgt über den browser unterstützen, gibt es eine Möglichkeit zum binden der "this" - Referenz in der Funktion, die aufgerufen wird von der Veranstaltung. Es wird in der Regel zeigen Sie auf das element, das das Ereignis generiert, wenn die Funktion ausgeführt wird, das ist nicht immer, was Sie wollen. Der schwierige Teil ist zur gleichen Zeit in der Lage sein, entfernen Sie das sehr gleiche Ereignis-listener, 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);           
    }
}

Den code oben funktioniert gut in Chrome, und es gibt wahrscheinlich einige shim um so "binden" kompatibel mit anderen Browsern.

InformationsquelleAutor der Antwort Lars Rönnbäck

Ein detail wurde noch nicht erwähnt wurde: moderne desktop-Browser betrachten verschiedene Tasten drücken, um "Klicks" für AddEventListener('click' und onclick standardmäßig.

• Auf Chrome 42 und IE11, beide onclick und AddEventListener klicken Sie auf Feuer auf der linken und mittleren Maustaste.
• Auf Firefox 38, onclick feuert nur auf die Links klicken, aber AddEventListener klicken Sie feuert auf den linken, mittleren und rechts klickt.

Auch mit der mittleren Maustaste Verhalten ist sehr nicht konsistent in allen Browsern, wenn scroll-Cursor sind beteiligt:

• Bei Firefox mit der mittleren Maustaste events immer Feuer.
• Auf Chrome, Sie wird nicht ausgelöst, wenn die middleclick öffnet oder schließt ein scroll-cursor.
• Auf IE, dann feuern Sie, wenn die scroll-cursor wird geschlossen, aber nicht, wenn es öffnet.

Es ist auch erwähnenswert, dass "click" events für alle-Tastatur wählbare HTML-element wie input auch das Feuer auf die Leertaste oder EINGABETASTE, wenn das element ausgewählt ist.

InformationsquelleAutor der Antwort a guest

Laut MDNder Unterschied ist wie folgt:

addEventListener:

Dem EventTarget.die Methode addEventListener () - Methode fügt die angegebene
EventListener-kompatibel-Objekt, um die Liste der Ereignis-Listener für das
bestimmten event-Typ auf dem EventTarget, auf dem es aufgerufen wird. Die
event-Ziel können Sie ein Element in einem Dokument, das Dokument selbst, ein
Fenster oder einem anderen Objekt, das events unterstützt (wie
XMLHttpRequest).

onclick:

Die onclick-Eigenschaft gibt den click-Ereignishandler code auf der
aktuellen element. Bei der Verwendung von click-Ereignis um eine Aktion auszulösen, auch
betrachten Sie das hinzufügen dieser gleichen Aktion auf dem keydown-event zu ermöglichen
die Verwendung der gleichen Aktion von Menschen, die nicht die Verwendung einer Maus oder einem touch
Bildschirm. Syntax-element.onclick = functionRef; wo functionRef ist ein
Funktion - oft ein name einer Funktion deklariert oder sonst eine Funktion
Ausdruck. Finden Sie unter "JavaScript-Handbuch:Funktionen" für details.

Gibt es auch Unterschiede in der syntax verwenden, wie Sie sehen in der unten aufgeführten codes:

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

InformationsquelleAutor der Antwort Alireza

Javascript neigt dazu, mischen alles in die Objekte und können, die machen es verwirrend. Alles in einem ist der JavaScript Weg.

Im wesentlichen onclick ein HTML-Attribut. Umgekehrt addEventListener ist eine Methode, die auf das DOM-Objekt repräsentiert ein HTML-element.

In JavaScript-Objekte, die eine Methode ist bloß eine Eigenschaft, eine Funktion als Wert und wirkt gegen das Objekt, mit dem es verbunden ist (mit diesem Beispiel).

In JavaScript als HTML-element repräsentiert durch DOM wird Attributen zugeordnet, auf dessen Eigenschaften.

Dies ist, wo Menschen bekommen verwirrt, weil die JavaScript-Meldungen, die alles in ein einziges container-oder namespace-ohne Dereferenzierung.

In einer normalen OO-layout (das ist zumindest das Zusammenführen der namespace der Eigenschaften/Methoden) würden Sie vielleicht so etwas wie:

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

Gibt es Variationen wie könnte es eine getter - /setter für onload oder HashMap für Attribute, die aber letztlich das ist, wie es Aussehen würde. JavaScript beseitigt, dass die Dereferenzierung an der erwarten, zu wissen, was was ist unter anderem. Es zusammengeführt domElement und Attributen zusammen.

Abgesehen von der Kompatibilität sollten Sie als best practice verwenden Sie die Methode addEventListener. Wie die anderen Antworten sprechen Sie über die Unterschiede in dieser Hinsicht eher als die grundlegenden programmatischen Unterschiede werde ich verzichten. Im wesentlichen, in einer idealen Welt, die Sie sich wirklich nur dafür gedacht, um zu verwenden* HTML-aber in einer idealen Welt, die Sie nicht tun sollten etwas von HTML.

Warum ist es dominant heute? Es ist schneller zu schreiben, leichter zu lernen, und neigt dazu, nur Arbeit.

Den ganzen Punkt von onload in HTML zu geben, Zugang zu der addEventListener-Methode oder die Funktionalität an Erster Stelle. Mit JS wirst du über HTML, wenn Sie könnten, die Anwendung direkt.

Hypothetisch können Sie Ihre eigenen Attribute:

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

Was JS tut, ist ein bisschen anders.

Können Sie gleichsetzen und es so etwas wie (für jedes element erzeugt):

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

Den tatsächlichen Implementierungsdetails wird wahrscheinlich unterscheiden sich mit einer Reihe von subtilen Variationen machen die zwei etwas unterschiedliche, in einigen Fällen aber ist der Kern von ihm.

Es ist wohl eine Kompatibilität Kerbe, die Sie können die pin-Funktion zu einem Attribut, da durch die Standard-Attribute sind alle strings.

InformationsquelleAutor der Antwort jgmjgm