3

普通风格

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

4

4 回答 4

4

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

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

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

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

于 2010-07-01T14:54:33.107 回答
1

我知道您的担忧，因为我有类似的担忧，并决定使用 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 元素。

于 2010-07-01T15:05:51.873 回答
0

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

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

于 2010-07-01T14:59:28.107 回答
0

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

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

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

于 2010-07-01T15:06:05.773 回答