在一个完美的标记世界里--所有的东西都是语义的，你应该把你的标记、样式和javascript分别放在它们各自的文件里。
它只是让事情更容易调试，而且在一个事情变化如此频繁的行业中，如果你确切地知道你在寻找什么，无论是事件、样式还是标记，它会让事情变得非常简单。
例如：移到css文件做所有的样式，我发现，通过隔离您需要在以后选择的元素，预思会增加。

非侵入性（也就是说，在<script>标记之外的HTML标记中不嵌入JavaScript）是可行的方法。为什么？原因如下：
它加强了关注点的分离。为什么你的HTML应该关心行为呢？
它使优雅降级/渐进增强成为可能。你可以根据用户浏览器实际允许的功能更优雅地检测和处理用户交互。
它使编辑和维护变得更加容易。不用在标记中搜索JavaScript引用来编辑，所有脚本都在一个集中的位置。

前面的答案是从关注点分离的Angular 来解决这个问题的，但是在javascript中使用事件处理程序也有一些很好的技术原因，在我看来，其中最主要的是你可以使用闭包来封装事件处理程序所需的一些信息。
例如，假设您正在接收一个位置列表和一个占位符，您希望绘制一个指向这些位置的链接列表，并在单击它时显示一个包含位置名称的提醒弹出窗口。下面是一个示例：

function alertGenerator(loc) {
  return function() {alert("Hi, I'm visiting " + loc);};
}

function createLocationList(locations, placeholder) {
  // Create a jQuery wrapper for placeholder
  var $placeholder = $(placeholder),
    loc,
    location,
    $link; 
  // loop over the locations, create a link for each iteration
  for (var loc in locations) if locations.hasOwnProperty(loc) {
    location = locations[loc];
    $link = $("<a>");
    $link.text(location).click(alertGenerator(location));
    $placeholder.append($link);
  }    
}

如果您尝试使用onclick属性来执行此操作，您将遇到两个大问题。首先，您将主要处理字符串，而不是实际的函数和DOM元素（或jQuery对象）。根据我的经验，这类代码更难调试。
第二，如果您要参数化onclick中的函数调用，那么参数必须是全局的，这样它才能在回调的作用域内。