比较几种方式编写JS html

Question

我有3行同样的后果

1. <button onclick="myFunction()">Click me</button>
   
2. button.onclick=function(){alert('This is my test')};
   
3. button.addEventListener("click", fuction(){alert('This is my test')});

你能告诉我道路是最好的吗？

Answer 1

我推荐方法3。

如果使用第一种方法，一个缺点是维护更难。如果您要更改函数名称，则需要在多个文件中更改它 - 导致许多错误。

假设您在 DOM加载后运行JavaScript ，我会（个人）定义该函数，然后将其附加到按钮，如下所示：

function buttonListener(event) 
// ...
button.addEventListener('click', buttonListener);

这样，您的JavaScript就会停留在一个文件中。

但是，如果您在相对较小的标记文件中尽可能快地执行（没有DOM）或在<script>标记中编码，那么我认为方法一没有问题。

尽量避免使用方法2 - 将属性分配给匿名函数稍微难以阅读（并且有点隐含）。