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方法吗？这样做有什么好处吗？

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

Answer 1

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

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

Answer 2

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

基本上我命名为click，hover，mouseover等事件，然后在我的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或委托替换$ .bind调用以挂钩未来的dom元素。

Answer 3

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

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

Answer 4

Imho我不喜欢用jQuery方法读取html时，对链接的作用没有任何线索。

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

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

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

4 个答案: