Question

哪一个更有支持性或更好用，为什么？

示例：

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

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

谢谢。

Answer 1

最佳做法是将您的疑虑分开。 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"); };

Answer 2

为什么最好避免内联事件侦听器的一些原因：

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

内联Javascript比<script> </script>标记更受欢迎

2 个答案: