代码之家 › 专栏 › 技术社区 › immutabl

JQuery-将GUI对象连接到事件的最佳方式?

html jquery javascript

immutabl · 技术社区 · 14 年前

<button onClick='myFunction(this);' ...  />

具有相关功能:

function myFunction(obj){
    alert('this is how old-timers like me do it!')
}

我的一些同事喜欢将脚本附加到la JQuery事件:

$(document).ready(
    $("#myButton").click(
        function(event){
            alert('this is the newer JQuery way of doing things');
        }
    );
);

4 回复 | 直到 14 年前

tsimbalar 14 年前

我认为第二种方法比较干净,原因如下:

内容和行为分开
这真的 帮助维护 ,如你所知 去哪里找
当HTML实际上是动态的(在服务器端、la-PHP或ASP.NET上生成)时,在生成的HTML中包含这些客户端元素实际上是相当痛苦的。。。这是一个非常常见的错误源,因此 很高兴javascript不受影响

Nick Craver 14 年前

您拥有的jQuery版本也可以小得多:

$(function() {
  $("#myButton").click(function(){
    alert('this is the newer JQuery way of doing things');
  });
});

我要用这个还是不显眼的路线( 不 许多的 更容易的。记住这条路线可以 JavaScript在页面中,客户端可以加载和缓存一次,这也意味着页面加载速度更快。

有很多事情你不能正确地(或跨浏览器)内联,例如非常有用的 mouseenter 和 mouseleave

Bobby Jack 14 年前

“jQuery”方式强制内容和功能之间的分离,这在我看来是件好事。它减少了内容/标记中的“噪音”。它还使程序员能够专注于脚本编写,而“marker upper”则专注于HTML。

顺便说一句,你没有有如果不想使用匿名函数,请使用“过度大括号”:

function myFunction(obj){
    alert('this is a compromise!')
}

$(function() {
    $("#myButton").click(myFunction);
});

ngn 14 年前

jQuery版本更好,因为它将行为(JavaScript)和结构(HTML)分开。

如果括号太多,可以使用编译成JavaScript的语言,例如coffee script(http://jashkenas.github.com/CoffeeScript/):

$ ->
  $("#myButton").click ->
    alert 'this is the newer JQuery way of doing things'

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前