Question

好的，这是首选的/正确的，或者何时应该使用一个而不是另一个，以及使用以下内容的好处/缺点;

<a href="#" id="hypMyLink" onClick="myFunc();">a link</a>

<script>
    function myFunc(){
        //do something
    }
</script>

... OR

<a href="#" id="hypMyLink">a link</a>

<script>
    $(function() {
        $('#hypMyLink').click(function(e) {
            //do something
        });            
    });
</script>

提前致谢！

Answer 1

在完美的标记世界中 - 所有内容都是语义的，您可以在各自的文件中分隔您的标记，样式和javascript。

它使调试变得更加容易，并且在行业中更改，如果您确切地知道您正在寻找的事件，样式或标记，那么它会非常简单。

作为一个例子：移动到执行所有样式的css文件我发现通过隔离你需要在以后选择的元素来增加预先考虑。

Answer 2

不引人注目（即，<script>标签之外的HTML标记中没有嵌入JavaScript）是可行的方法。为什么？有几个原因：

它加强了关注点的分离。你的HTML为什么要关心行为？

它可以实现优雅的降级/渐进增强。您可以更加优雅地检测和处理用户交互，具体取决于用户的浏览器实际允许的内容。

它使编辑和维护变得更加容易。

，而不是在整个标记中搜索JavaScript引用进行编辑，而是将所有脚本放在一个集中位置。

Answer 3

之前的答案严格地从关注点分离的角度来解决问题，但是在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中对函数调用进行参数化，那么该参数必须是全局的，以便它在回调范围内。

我应该使用内联或有线事件处理程序

3 个答案: