说到jQuery之绑定事件，你是否能很快的说出有哪些呢，如果不行赶紧查找资料吧，o(∩_∩)o 。近期改版网站用到很多绑定事件，今儿突然想拿出来梳理下，精通它的朋友看看就可以，不通它的朋友可以学习下咯。

jQuery常用绑定事件有四种方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。接下来我近期做项目过程中对于绑定事件的一些感触吧：

谈谈jQuery之绑定事件

让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。

下面这个是点击按钮之后控制导航菜单开合的javascript代码。

这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。

问题的核心是我们同时在表现和交互中使用了CSS的类名。这违反了关注点分离的原则，让维护更容易出错。

让我们用一个不同的方法来实现

这次我们使用这个data属性（data-hook）来选择元素。任何对CSS类的改变将不会影响到javascript，让我们能够实现关注点分离以及更加稳定的代码。

下面我们用data-hook属性来选择对应的元素：

需要注意的是，我也使用data-hook作为nav元素的选择器。你不一定需要，但是我喜欢这里面包含的思想：任何使用你看到data-hook，你会知道这个元素在javascript中引用到啦。

我必须承认data-hook选择器并不是很漂亮。让我们通过扩展jQuery实现一个自定义的函数：

上面准备完毕，我们来重写一下javascript。

更好的是，我们甚至可以把一系列以空格分开的hook名字放在一个元素上。

我们可以找到里面的任意个hook名字：

我们也能够找到页面上所有的hook元素

到目前为止，我们在事件处理中使用的都是匿名函数。让我们重写一下，使用声明的函数来代替它。

这让事件绑定的代码更加易读。这个toggleNavMenu函数名表达了意图，是代码自我注释的好例子。

我们同时也获得了可复用的能力，因为其他地方可能需要使用toggleNavMenu函数。

最后，这对于自动化测试来说是意见大喜事，因为声明的函数的单元测试要比匿名函数单元测试容易的多。

jQuery提供了一个简单方便的语法来处理多事件的问题。比如，你可以为一系列空格隔开的事件列表绑定同一个事件处理函数。

如果你需要为不同的事件绑定不同的处理函数，你可以使用对象表达方式：

反过来，你可以同时取消多个事件的绑定：

你可以想象到的是，不小心的取消事件绑定可能会导致严重的我们不想要的副作用。继续看我们可以通过哪些技巧来减轻这个问题。

一般情况下我们不会在一个元素的同一事件类型绑定多个事件处理函数。让我们再看一下之前的那个按钮：

不同的代码区域可能会在同一个元素的同一事件绑定不同的事件处理函数：

尽管我们使用了不同的选择器，但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮：

糟糕的是，上面的代码实际上回删除所有的点击事件处理函数，不仅仅是trackClick。我们应该实用更加有辨别力的方式来指定我们需要删除的事件处理函数：

另一种方式是使用命名空间。任何事件都有资格使用一个命名空间来实现绑定和取消绑定，这样你就可以更好的控制事件绑定和取消绑定。

你也可以使用多个命名空间：

需要注意的是，命名空间的顺序是没有关系的，因为命名空间不是层级式的。

如果你有一个复杂的功能需要多个元素绑定多个事件，那么使用命名空间是一种简单的把他们组织起来然后快速清除的方式：

命名空间在写插件的时候尤其有用，因为这样你就能保证只会取消自己命名空间范围内的事件处理函数的绑定。

好了，到此为止了，看完后是否学到了呢。

bcoder编程网

#jQuery-bind-on.html">bcoder编程网/jQuery-bind-on.html

谈谈jQuery之绑定事件

付费节点推荐