比较几种方式编写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 - 将属性赋值给匿名函数稍微难以阅读(并且有点隐含).