我明白了为什么不直接在元素中写onlick属性了

概要原因：便于维护、将您的编程逻辑与内容分离也会使您的站点对搜索引擎更加友好。

 

具体原因概述：

行内事件处理器 - 请勿使用
你也许在你的代码中看到过这么一种写法:

<button onclick="bgChange()">Press me</button>
function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}
Note: 您可以在GitHub上找到这个示例的完整源代码(也可以在线运行).

在Web上注册事件处理程序的最早方法是类似于上面所示的事件处理程序HTML属性(也称为内联事件处理程序)—属性值实际上是当事件发生时要运行的JavaScript代码。上面的例子中调用一个在<script>元素在同一个页面上，但也可以直接在属性内插入JavaScript，例如：

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
你会发现HTML属性等价于对许多事件处理程序的属性；但是，你不应该使用这些—他们被认为是不好的做法。使用一个事件处理属性似乎看起来很简单，如果你只是在做一些非常快的事情，但很快就变得难以管理和效率低下。

一开始，您不应该混用 HTML 和 JavaScript，因为这样文档很难解析——最好的办法是只在一块地方写 JavaScript 代码。

即使在单一文件中，内置事件处理器也不是一个好主意。一个按钮看起来还好，但是如果有一百个按钮呢？您得在文件中加上100个属性。这很快就会成为维护人员的噩梦。使用 Java Script，您可以给网页中的 button 都加上事件处理器。就像下面这样：

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}
注释: 将您的编程逻辑与内容分离也会使您的站点对搜索引擎更加友好。