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

【问题标题】：Using jQuerys document.Ready function to attach events to elements使用 jQuery document.Ready 函数将事件附加到元素
【发布时间】：2010-07-01 14:43:04
【问题描述】：

普通风格

<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) {...});），但是在处理单个元素时我不知道应该使用哪个。

【问题讨论】：

" 使用 jQuery 方法读取 html 时，不知道链接的作用。" 您始终可以使用 cmets，或者更好的是，使用描述性 ID 和类. myLink 没有说太多，但 helloLink 明白了这一点。
我在写完这篇文章后不久就意识到，当我注意到我的链接的 Id 与它正在调用的函数的名称完全相同时:)

标签： jquery jquery-events document-ready

【解决方案1】：

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

它将所有 javascript 内容保存在一个地方；你是对的，当你阅读 HTML 时，你不知道点击链接会做什么，但另一方面是，如果你内联定义事件处理程序，那么当你阅读 javascript 时，你不知道什么时候函数将被调用。我喜欢尽可能地将我的“层”分开。
它促进了有时称为“unobtrusive javascript”的内容，以及应用程序的优雅降级。优雅降级（或“渐进式增强”）的想法是，您将链接设为真正的链接，该链接将转到单独的页面，但随后您使用 javascript 劫持点击事件，并在不离开页面的情况下提供相同的功能。这样，如果用户没有 javascript（比如他们是使用屏幕阅读器的禁用用户），应用程序仍然可以工作。
它使 javascript 更具可重用性；假设我基于诸如 CSS 类之类的通用内容定义了将我的事件处理程序绑定到的元素。然后我可以将该javascript放到各种页面上并让它“正常工作”。例如，我一直这样做是为了自动保存。

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案3】：

JQuery 处理事件的方式被定义为不显眼 (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) 并且通常比“标准”方式更受欢迎，因为您在逻辑和表示之间有明确的分离，并且通常代码更易于重用。

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

【讨论】：

【解决方案4】：

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

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

其他答案已经为您提供了许多避免在 HTML 中使用 onclick 样式事件的理由...我也尽量避免在我的 HTML 中使用 <a href="#"> 链接，确保文档中的任何 <a> 标记有一个目的。我会经常使用 jQuery 创建额外的<a> 标签来添加功能只有在浏览器允许我处理它们上的点击事件

【讨论】：