JavaScript作为HTML属性是不好的实践吗？

Question

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

我越来越经常看到这种情况。

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

在HTML属性中使用Javascript（例如onclick，onchange等）是不好的做法吗？

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

- Michael Schwartz

---

它们被允许使用的确切目的！如果简单的话，但你在这里没有存储状态，这是确定的。 - lux

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>

说到这一点，后者更适合调试/代码维护。

- user3786755

Answer 2

每个属性都是一个新的监听器。你拥有的属性越多，负荷就越重。 将JS和HTML混合使用不被认为是一种良好的实践。把它看作关注点分离。标记存在于此以为客户端提供UI。JS的工作（在浏览器中）是增强用户体验。它们必须共同工作，但有不同的任务。因此，它们应该被视为独立的实体。

- Gitaram Kanawade

Answer 3

这并不是“错”的，但绝大多数人认为这是不良实践。最好的做法是尽可能地将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<=9，请查看this answer。

- Sverri M. Olsen

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>

- Byren Higgin

---

该HTML onchange属性仍然包含JavaScript代码（就像链接示例中一样），因此我不确定区别在哪里。 - Thilo

onChange属性是客户端事件，允许调用函数或方法。这在技术上已被jQuery替代，使用类似的$('#valbox').change();，它仍然是一个事件，只是以不同的方式拦截（我认为是从浏览器的事件日志中），而不是在代码行中。两种方法都是有效的，我描述的内联方法并不是“不良实践”，只是有点过时了。你描述的内联操作方法被认为是不良实践。 - Byren Higgin