内联Javascript比内部<script></script>标签

Is inline Javascript more prefered than inside <script></script> tag

本文关键字：script 标签 Javascript 内部 内联      更新时间：2023-09-26

哪一个更支持或更可取，为什么?

为例:

在html标签内嵌javascript:

Html:<input type="button" value="click" onclick="doFunction()" />

并像这样调用该函数:

<script type="text/javascript">
   function doFunction()
    {
      alert("Hello World");
    }
</script>

或者像这样做(使用jquery):

html:<input type="button" value="click" />

Jquery: 

<script type="text/javascript">
   $(document).ready(function(){
      $("input[type='button']").click(function(){
          alert("Hello World");
      });
   });
</script>

请提供一些与答案相关的文章链接。

谢谢。

最佳实践是将您的关注点分开。html应该显示显示，javascript应该使其动态。话虽如此，我建议你的html有一个简单的方法来定位，如果它是使用

<input id="btnClick" type="button" value="click" />

然后针对特定的元素使用

$("#btnClick").click(function(){ alert("click"); });

总的来说，如果你做的是一个小网站，只有在你打算使用大量的功能时才包括jQuery。如果你只需要为click事件处理程序使用jQuery，那么最好使用计划javascript(注意，在jQuery中完成的任何事情都可以在javascript中完成)

document.getElementById("btnClick").onclick = function(){ alert("click"); };

最好避免内联事件侦听器的一些原因:

  1. 保持脚本逻辑与主题/gui层分开(正如其他人所说)。
  2. 很难堆叠或命名空间内联事件侦听器。例如，在同一个事件中应用多个事件侦听器。
  3. 内联事件侦听器必须依赖全局命名空间中的变量，因此，如果不首先在全局公开这些变量，就不可能为事件侦听器使用外部包装的局部作用域。。您有一个查找/生成多个链接标记的循环，并且希望应用一个引用包装局部作用域中的变量的单击侦听器。使用内联事件是不可能的。
    4. 由于内联代码和节点对象本身之间的循环引用，内联事件侦听器在旧浏览器中更容易发生内存泄漏。我不知道这是否仍然适用于现代用户代理。
  4. 你无法控制事件何时被捕获，使用addEventListener，你可以在大多数浏览器中选择捕获或冒泡阶段。
  5. 由于标记中的内联事件侦听器是基于文本的(即不是基于函数的)，因此无法将相同的代码应用于许多元素。相反，您必须复制文本，然后将其转换为每个元素的新事件侦听器—浪费资源。
  6. 内联事件监听器在其元素被移除并重新添加到Dom中时可能会有奇怪的行为。这不是我曾经尝试过的东西，但我认为事件侦听器属性将在重新插入dom时重新评估，这将是不理想的，甚至可能产生意想不到的结果。
    7. 使用标记中的内联事件侦听器，您无法在实现侦听器之前对事件进行特性测试。在使用适当分离的javascript时，您可以在应用侦听器之前检查if ( typeof elm.ondblclick != 'undefined' ) { ... }是否为真，或者决定降级为回退。显然，可以将所有可能的侦听器实现为标记的一部分，但这可能会产生不希望的效果。
相关文章：