vergleichen fews Wege schreiben JS html

Question

Ich habe 3 Linie für die gleiche Folge

1. <button onclick="myFunction()">Click me</button>
   
2. button.onclick=function(){alert('This is my test')};
   
3. button.addEventListener("click", fuction(){alert('This is my test')});

Sie mir die Art und Weise sagen könnte, ist die beste .

Answer 1

Ich empfehle Methode 3.

Wenn Sie die erste Methode verwenden, ein Nachteil schwierige Wartung ist. Wenn Sie den Funktionsnamen ändern müssten, müssten Sie ihn innerhalb mehrere Dateien ändern - die Ursache für viele Fehler.

Unter der Annahme, dass Sie Ihren JavaScript laufen nach das DOM geladen ist, würde ich (persönlich) definiert die Funktion, dann bringen Sie es wie so auf die Schaltfläche:

function buttonListener(event) 
// ... 
button.addEventListener('click', buttonListener); 

Auf diese Weise Ihres JavaScript bleibt in einer Datei.

Wenn Sie jedoch so schnell wie möglich (kein DOM) oder in <script> Tags innerhalb einer relativ kleinen Markup-Datei codieren, sehe ich kein Problem mit Methode eins.

Versuchen Sie Methode 2 zu vermeiden, wenn Sie können - eine Eigenschaft zu einer anonymen Funktion zuweisen ist etwas schwieriger zu lesen (und ist etwas implizit).