Question

示例：https://stackoverflow.com/a/37289566/710887

我越来越多地看到这种情况发生了。

我总是被教导要将javascript，css和html分开（当然，html链接到源/脚本）。

在HTML属性中使用Javascript（例如onclick, onchange, etc:）不良做法吗？

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

Answer 1

总的来说，是的，这是非常糟糕的做法，但是，有时候，在测试/快速实施时，它要快得多：

<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>

话虽如此，后者更适合于调试/代码维护。

Answer 2

本身并不是错误，但是是的，绝大多数人认为这是不好的做法。

好的做法是尽可能多地分离HTML和Javascript。它与CSS的概念相同。将HTML，CSS和Javascript混合在同一个文件中可能会很快变得无法管理，如果可能的话应该避免使用。

理想情况下，两者应位于单独的文件（.html和.js文件中），但在HTML中将它们分开是一个很好的第一步。

您可以使用事件侦听器将两者分开，如下所示：

<!-- 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>

如果您需要支持IE＆lt; = 9。

，请参阅this answer

Answer 3

每个属性都是一个新的侦听器。你拥有的属性越多，越重。混合使用JS和HTML并不是一种好的做法。将其视为关注点的分离。标记用于为客户端提供UI。 JS的工作（在浏览器中）是为了增强用户体验。他们必须一起工作，但有不同的任务。因此，它们应被视为单独的实体。

Answer 4

它很麻烦并且可能无法管理，因为如果您收到错误或意外结果，您将很难跟踪导致错误的代码，这意味着它在技术上是一种不好的做法。您可以非常轻松地用

替换您提供的代码

<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)">

或其他语法正确的内容。

编辑：这是使用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>

JavaScript是HTML属性糟糕的做法吗？

4 个答案: