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

普通样式

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

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

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

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

函数myFunc（）{
警惕（“你好！”）；
}

jQuery风格

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

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

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

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

$（文档）.ready（函数（）{
$（“#myLink”）。单击（函数（）{
警惕（“你好！”）；
});
});

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

---

我不喜欢在用jQuery方法阅读html时，没有任何关于链接作用的线索。我发现jQuery attach方法在附加到多个元素（例如，

$（“#myTable tr”））时非常有用。单击（函数（e）{…}；

），但在处理单个元素时，我不知道应该使用哪种方法。

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

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

它促进了有时被称为“”的内容，也促进了应用程序的正常降级。优雅降级（或“渐进增强”）的理念是，将链接设置为一个真正的链接，可以转到单独的页面，但随后使用javascript劫持单击事件，并在不离开页面的情况下提供相同的功能。这样，如果用户没有javascript（比如说他们是使用屏幕阅读器的禁用用户），应用程序仍然可以工作

它使javascript更加可重用；假设我基于诸如CSS类之类的泛型定义了要将事件处理程序绑定到的元素。然后我可以将javascript放到各种页面上，让它“正常工作”。例如，我一直在为autosave之类的东西做这些

---

JQuery处理事件的方式定义为不引人注目（），通常优于“标准”方式，因为您在逻辑和表示之间有明确的分离，并且通常代码更易于重用

---

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

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

基本上我给我的点击、悬停、鼠标悬停等命名了名称空间。。。事件，然后调用my 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>

变量第1页={
活动：{
点击：{
元素ID：{
func:function（evt）{//其中elementname是元素的id
//你的代码在这里
},
选择器：“#someId”
}
元素类：{
func:function（evt）{//其中elementclass是元素的类
//你的代码在这里
},
选择器：“.someClass”
},
鼠标悬停：{
//类似于单击名称空间
},
灭鼠器：{
//类似于单击名称空间
},
....
}
};
$（文档）.ready（函数（）{
for（第1页中的var键。事件）{
for（第1页中的var eventKey.Events[key]）{
$（Page1.Events[key][eventKey].selector）.bind（key，Page1.Events[key][eventKey].func）；
}
}
});

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

我不喜欢在用jQuery方法阅读html时，没有任何关于链接作用的线索

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

---

其他答案已经为您提供了许多避免HTML中单击

样式事件的理由…我也尽最大努力避免HTML中的

链接，确保文档中的任何

标记都有其用途。我通常会使用jQuery创建额外的

标记，以添加功能，只有在浏览器将允许我处理它们上的单击事件

“当使用jQuery方法读取html时，对于链接的作用没有任何线索。”你可以随时使用注释，或者更好地使用描述性Id和类。

myLink

没有说太多，但是

helloLink

明白了这一点。写这篇文章后不久，当我注意到我链接的Id与它调用的函数的名称完全相同时，我实际上意识到了这一点：）