JavaScript是否为HTML属性不良实践？

例如：https://stackoverflow.com/a/37289566/710887 JavaScript是否为HTML属性不良实践？

我看到这种情况越来越频繁。

我总是被教导要保持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">

来源

2016-05-18 Michael Schwartz

允许他们使用它们的确切目的！如果简单确定，但你不在这里存储状态，这是确定的。 – lux

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

好的做法是尽可能地分开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>

见this answer，如果你需要支持IE < = 9。

来源

2016-05-18 04:11:55

这是凌乱的，可以是难以控制的，因为如果你错误或意外的结果，你将有一个更难的时间跟踪导致该错误的代码，这意味着它在技术上是一个坏实践。您可以非常容易地用您提供的代码替换您提供的代码或

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

来源

2016-05-18 03:48:54

在HTML onchange属性中仍然有Javascript（就像在链接的例子中一样），所以我不确定它们有什么区别。 – Thilo

onChange属性是允许调用函数或方法的客户端事件。这在技术上已被jQuery替代，使用类似的'$（'＃valbox'）。change（）;'，这在技术上仍然是一种以不同方式拦截的事件（我相信从浏览器的事件日志中可以看出）这不在代码行中。这两个都是有效的，我描述的内联方法不是“不好的做法”，它只是有点过时。您描述的执行内联IS操作的方法被认为是不好的做法。 –

在一般情况下，非直列相当于是的，这是非常不好的做法，但是，有时，在测试/做一个快速的实现，它的速度要快得多：

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

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

话虽如此，将L atter对于调试/代码维护更为优选。

来源

2016-05-18 04:00:10

每个属性是一个新的侦听器。你有更多的属性，更重。混合JS和HTML不被认为是好的做法。把它看作是关心的分离。标记是为了向客户提供一个UI。 JS的工作（在浏览器中）是为了增强用户体验。他们必须一起工作，但有不同的任务。因此，他们应该被视为独立的实体。

来源

2016-05-18 04:32:00

JavaScript是否为HTML属性不良实践？

回答

相关问题