Html onclick属性vs script的onclick事件监听器

Question

作为初学者，我只是尝试各种HTML元素和脚本。然后我遇到了HTML属性 onclick 。

由于我在使用HTML进行实验之前已经做了更多的脚本编写，我想知道通过DOM本身调用函数或通过JS / Jquery的事件监听器之间是否有任何区别。

E.g： -

HTML

<button onclick="myFunc()" id="btn1">button 1</button>

VS脚本

<button id="btn2">button 2</button>

<script>
    $(document).on('click','#btn2",function(){
        //code here
    });
</script>

我也想知道优点和缺点，以及两者中的哪一个是最佳实践。

如果我违反了在这里提问的规则，请告诉我，以便我可以修改/删除问题。

Answer 1

  

我也想知道优点和缺点，以及两者中的哪一个是最佳实践。

＆＃34; VS脚本的优点＆＃34;：

即使在声明了函数之后，也可以添加
• 元素而无需添加点击处理程序
• 单个回调函数可以处理各种元素的点击（或其他事件），然后将操作委托给各种函数......
• 使用onClick或类似属性是HTML中的混合JS - 这违反了Separation of Concerns原则。使用＆＃34; VS脚本＆＃34;逻辑与标记分开。
• 可以避免内存泄漏
• 更适合event delegation
• 代码清理程序可能会在onclick，onmouseout等属性中抱怨内联脚本。

＆＃34; VS脚本＆＃34;：

• 点击处理程序注册后添加到DOM的元素不会触发点击处理程序（有关详细信息，请参阅this answer）。
• 来自旧版浏览器的支持可能会使实现这一点变得更加复杂（例如在IE 9之前addEventListener ...但是如果您使用的是像jQuery这样的库（就像您提到的那样），那么很可能会为您处理这个问题。
• 可能需要做更多的工作才能获得发生事件的元素的属性

有关更详细的说明，请参阅this answer。