jQuery的事件绑定和处理

我已经看到了很多的jQuery的这样的代码，不用说，我不喜欢它：jQuery的事件绑定和处理

<div id="myDiv"> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
</div> 

<script> 
    $(document).ready(function(){ 
     $('clickable').click(function(){ 
      // Do some stuff... 
     }); 
    }); 
</script>

我认识的人都在做这个，因为上述事件绑定和处理要求html结构在页面上可用，但它会导致在整个网站视图中混合呈现，逻辑和配置。另外，它使得用几乎所有调试器调试逻辑非常困难。

所以，我已经开始编码这样的，在一个单独的js文件(fiddle here)：

// BEGIN: Event Handlers 
    var onLoad = function(){ 
     $('.clickable').data('clicked', false); 
    }; 
    var onMyDivClick = function(){ 
     var clicked = $(this).data('clicked'); 
     if (clicked) { 
      $(this).trigger('myCustomEvent'); 
     } else { 
      alert('you clicked me'); 
      $(this).data('clicked', true); 
     } 
    }; 
    var onMyCustomEvent = function(){ 
     $(this).css('color', 'dimGray'); 
     alert('please don\'t click me again'); 
    }; 
// END: Event Handlers 

// BEGIN: Event Binding 
    $(window).on('load', onLoad); 
    $(document).on('click', '.clickable', onMyDivClick); 
    $(document).on('myCustomEvent', '.clickable', onMyCustomEvent); 
// END: Event Binding

现在，我并不需要关心的结构是页面上。我不需要将所有内容都包裹起来$(document).ready(function(){});而且我不需要关心结构是否要加载ajax。

问题1 方法有什么不足吗？到目前为止，我还没有找到任何。但在重构我们网站上的大部分代码之前，我想知道可能的注意事项。

问题2 这种方法如何进一步采用最新的jQuery功能？

来源

2013-02-28 Jani Hyytiäinen

我知道这种方法有一个缺点。它写在事件性能部分.on()。

在文档树顶部附近附加许多委托事件处理程序可能会降低性能。每次事件发生时，jQuery都必须将该类型的所有附加事件的所有选择器与从事件目标直到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请在尽可能靠近目标元素的文档位置附加委派事件。避免过多使用文档或document.body，以便在大型文档上进行委派事件。

因此，在将所有事件绑定到document之后，它会变得更糟。

而且在其他注意事项，有一些东西不能用这种方法工作，如load，scroll和error。

来源

2013-02-28 06:11:18 pktangyue

因此，除了onLoad之外，在onLoad中移动事件处理的其余部分并将它们尽可能贴近目标：http://jsfiddle.net/codepic/8pE6z/2/ 但是，这相当有效地破坏了使用ajax加载控件的事件处理。也许我需要在加载“控件”时触发自定义事件。像这样：http://jsfiddle.net/codepic/8pE6z/3/这样，文档元素上只会有一个事件处理程序，它会查找.control，并将事件的其余部分绑定到更接近目标的位置。 – 2013-02-28 06:41:14

查看框架，他们已经完成了锅炉板的工作。到目前为止我只使用过淘汰赛，但我会链接到其他一些。

淘汰赛数据/事件的伟大工程结合 - http://knockoutjs.com/
骨干 - http://backbonejs.org/
烬JS - http://emberjs.com/
角JS - 在淘汰赛http://angularjs.org/

的 “Hello World”：

http://knockoutjs.com/examples/helloWorld.html

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 

// Here's my data model 
var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 
    this.fullName = ko.computed(function() { 
     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
}; 

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

来源

2013-02-28 06:04:20

感谢您的链接。至少我一直在寻找淘汰赛，并计划实施上述框架之一。但首先，我需要清理当前平台上的自定义用户界面逻辑，并指示UI人员从那里继续使用最好的纯jQuery协议。你知道，他们都习惯了jQuery，所以在他们需要改进的时候向他们抛出一个新的框架，只会重新构造另一个框架。但是，是的，当我进行数据绑定并创建结构良好的ajax控件时，上述解决方案非常适合。 – 2013-02-28 06:17:56

非常平衡的方法。编辑 - 除非“大量的代码”是实质性的。如果是这样，为什么要经历两大变化？ – 2013-02-28 06:23:47

OH OH！如果你想为你的用户界面教程提供KO教程，请访问http://learn.knockoutjs.com/。 – 2013-02-28 06:52:38

这让我大吃一惊。为了避免document.ready中的代码，并避免视图中的视图逻辑，会引入更多的复杂性。

您的方法直接绑定到文档，然后检查dom的点击。然后，您再点击第二个事件，这是您的逻辑生活的地方。

这对一个或两个元素很好。这不是你典型的应用程序。当你有5个元素需要做不同的事情时会发生什么？ 10点怎么样？也许15？

你的“简单”事件处理程序将成为一个不错的大开关（或者更糟，ifs和嵌套的ifs）。突然添加一个新的处理程序并不容易。也没有改变现有的事件。

你会更好地寻找一个框架，为您提供您正在寻找的分离。试图发出像这样的声音来“帮助”组织您的代码将回来咬你。代码中的大多数复杂性都是由工程师制作的，使其“简单”，“更好”和“未来证明”。

这不是要敲你或你的想法。你有正确的想法：分离责任是一件好事。我只是不认为你的方法是最好的。

正如另一个发布的回答，角度和骨干和余烬（和更多）提供了完成你想要的手段。另外，你不必保持你选择的图书馆:)

来源

2013-02-28 06:31:57

jQuery的事件绑定和处理

回答

相关问题