代码之家 › 专栏 › 技术社区 › 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'

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前