Ist JavaScript als HTML-Attribut schlechte Praxis?

Question

Beispiel: https://stackoverflow.com/a/37289566/710887

Ich sehe das passiert immer öfter.

Ich wurde immer gelehrt, Javascript, CSS und HTML getrennt zu halten (mit HTML-Link zu den Quellen/Skripten natürlich).

Verwendet ein Javascript in einem HTML-Attribut (wie onclick, onchange, etc:) schlechte Praxis?

<span id="valBox">25</span> 
 
<input type="range" min="5" max="50" step="1" value="25" onchange="valBox.textContent = this.value">

Answer 1

Es ist nicht falsch, per se, aber ja, es wird von der überwiegenden Mehrheit der Menschen als schlechte Praxis angesehen.

Gute Praxis ist es, die HTML und Javascript so viel wie möglich zu trennen. Es ist das gleiche Konzept wie mit CSS. Das Mischen von HTML, CSS und Javascript in derselben Datei kann sehr schnell unübersichtlich werden und sollte, wenn irgend möglich, vermieden werden.

Im Idealfall sollten die beiden in separaten Dateien (.html und .js Dateien) sein, aber sie in der HTML zu trennen ist ein guter erster Schritt.

können Sie trennen die beiden von Ereignis-Listener verwenden, etwa so:

<!-- The elements --> 
<span id="valBox">25</span> 
<input id="inputBox" type="range" min="5" max="50" step="1" value="25"> 

<script> 
    // Grab the elements here 
    var val = document.getElementById("valBox"); 
    var inp = document.getElementById("inputBox"); 

    // Add an event listener to the input element and 
    // set the span value when it changes 
    inp.addEventListener("change", function() { 
     val.textContent = this.value; 
    }); 
</script> 

this answer Sehen Sie, wenn Sie den Internet Explorer unterstützen müssen < = 9.

Answer 2

Es ist chaotisch und kann unkontrollierbar sein, dass, wenn Sie Fehler oder unerwartete Ergebnisse erhalten Sie eine härtere Zeit haben, den Code Tracing, die den Fehler verursacht, es bedeutet, ist technisch schlecht trainieren. Sie könnten den Code, den Sie mit

<script> 
    //Scripts 
    ...   
    function MyMethodName(val){ 
     ...("#valbox").text = val; 
    }; 
</script> 
... 
<span id="valBox">25</span> 
<input type="range" min="5" max="50" step="1" value="25" 
onchange="MyMethodName(this.value)"> 

oder was auch immer syntaktisch korrekt ist, sehr leicht ersetzen.

EDIT: Dies ist ein nicht-Inline-äquivalent jQuery

<script> 
    $('#inputID').change(function(){ 
     $('#valbox').text($('#inputID').val()); 
    }); 

<span id="valBox">25</span> 
<input id="inputID" type="range" min="5" max="50" step="1" value="25"> 

</script> 

Answer 3

Im Allgemeinen verwenden, ja, es ist sehr schlechte Praxis ist jedoch manchmal, beim Testen/eine schnelle Implementierung zu tun, es ist viel schneller :

<button onclick="alert('Hello World!');">Hey There!</button> 

VS

<script> 
    window.onload = function() 
    { 
     document.getElementById("button").onclick = function() 
      { 
       alert("Hello World!"); 
      } 
    } 
</script> 
<button id="button">Hey There!</button> 

auch sagen, dass die l atter ist für die Fehlersuche/Code-Pflege sehr zu bevorzugen.

Answer 4

Jedes Attribut ist ein neuer Listener. Je mehr Attribute du hast, desto schwerer. Das Mischen von JS und HTML wird nicht als gute Übung angesehen. Betrachten Sie es als Trennung der Besorgnis. Das Markup gibt dem Client eine Benutzeroberfläche. Der Job von JS (in einem Browser) soll die Benutzererfahrung verbessern. Sie müssen zusammenarbeiten, haben aber unterschiedliche Aufgaben. Daher sollten sie als separate Einheiten behandelt werden.