使用 jQuery 的 document.Ready 函数将事件附加到元素

Question

普通风格

<a href="#" id="myLink" onclick="myFunc();">click me</a>

function myFunc() {
    alert('hello!');
}

jQuery 风格

<a href="#" id="myLink">click me</a>

$(document).ready(function() {
    $("#myLink").click(function() {
        alert('hello!');
    });
});

我刚刚开始使用 jQuery，但我想知道这两者之间有什么区别。我应该更喜欢 jQuery 方法吗？这样做有什么好处吗？

恕我直言，我不喜欢用 jQuery 方法阅读 html 时，不知道链接的作用。我发现 jQuery Attach 方法在附加到多个元素时非常有用（例如 $("#myTable tr").click(function(e) {...});），但是当处理单个元素我不知道应该使用哪个。

Answer 1

我喜欢第二种方法，有几个原因。

1. 它将所有 javascript 内容保存在一个地方；你是对的，当你阅读 HTML 时，你不知道点击链接会做什么，但另一方面，如果你内联定义事件处理程序，那么当你阅读 javascript 时，你不知道什么时候函数将被调用。我喜欢尽可能地将我的“层”分开。

2. 它提倡有时所谓的“不引人注目的 javascript”，以及优雅的降级您的申请。优雅降级（或“渐进增强”）的想法是，您将链接设置为真正的链接，该链接将转到单独的页面，但随后您使用 javascript 劫持点击事件，并在不离开页面的情况下提供相同的功能。这样，如果用户没有 javascript（假设他们是使用屏幕阅读器的残疾用户），应用程序仍然可以工作。

3. 它使 javascript 更加可重用；假设我根据 CSS 类等通用内容定义了将事件处理程序绑定到的元素。然后我可以将该 JavaScript 放到各种页面上并让它“正常工作”。例如，对于自动保存之类的事情，我一直这样做。

Answer 2

我知道您的担忧，因为我也有类似的担忧，并决定使用 Jquery 和命名空间来绑定来自 javascript 命名空间的事件。这就是我如何将事件挂钩到单个元素以及将事件挂钩到具有相同类或标记名的多个元素。

基本上，我对单击、悬停、鼠标悬停等事件进行了命名空间，然后在 document.ready 中调用命名空间事件。原因是我可以从一个地方查看所有点击、悬停、鼠标悬停事件。

<script type="text/javascript">

  var Page1 = {
    Events: {
       click: {
         elementid: {
           func: function(evt) {  //where elementname is the id of your element
           //your code here
           },
           selector: "#someId"
         }
         elementclass: {
           func: function(evt) { //where elementclass is the class of your element(s)
           //your code here
           },
           selector: ".someClass"
         },
       mouseover: {
         //similar to click namespace
       },
       mouseout: {
         //similar to click namespace
       },
       ....
    }
  };

  $(document).ready(function() {
    for (var key in Page1.Events) {
      for (var eventKey in Page1.Events[key]) {
        $(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func);
      }
    }
  });

</script>

现在，这样做的好处是您只需将事件添加到命名空间，它们就会自动与文档就绪挂钩。您还可以用 Live 或 delegate 替换 $.bind 调用以挂钩未来的 dom 元素。

Answer 3

JQuery 处理事件的方式被定义为不引人注目 (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) 并且通常优于“标准”方式，因为逻辑和表示之间有明确的分离，并且通常代码更可重用。

更不用说 JQuery（但其他库也做同样的事情）为您处理浏览器不一致问题。

Answer 4

恕我直言，我不喜欢用 jQuery 方法阅读 html 时，不知道链接的作用。

禁用 JavaScript 的浏览器也不知道您的链接的作用。他们看到一个指向文档顶部的链接！

其他答案已经给了您很多避免 HTML 中 onclick 样式事件的理由...我也尽力避免 HTML 中的链接，确保文档中的任何 标记都有其用途。我经常使用 jQuery 创建额外的 标签来添加功能仅当浏览器允许我处理它们上的点击事件