Html onclick 属性与脚本的 onclick 事件侦听器

Question

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

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

例如：-

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

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

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

我也想知道优缺点以及两者中哪一个是最佳做法。

如果我违反了在这里提问的规则，请告诉我，这样我就可以 modify/delete 这个问题。

Answer 1

I would also like to know the pros and cons and which of the two is best practice.

"VS Script" 的优点：

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

"VS Script" 的缺点：

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

更详细的解释见this answer。

Html onclick attribute vs script's onclick event listener