Jquery中的事件命名机制

来源：aitangyong的专栏

JQuery中的bind()和unbind()，提供了事件的绑定和取消机制，既可以绑定html默认支持的事件，也能够绑定自定义的事件。JQuery支持自定义事件，这显然给编程带来了极大的灵活性。下面就一起学习下，jquery事件处理的一些特性。

1、JQuery中事件可以重复绑定，不会覆盖。


1

2

3

4

5

6

$("#button1").bind("click",function(){

    alert("func1");

});

$("#button1").bind("click",function(){

    alert("func2");

});

当点击button1的时候，这2个事件处理函数都会触发。也许你会说，上面绑定的是不同的匿名函数，占用不同的内存空间。的确是这样的，不过就算是同一个处理函数，依然存在重复绑定问题。当button1被点击的时候，下面的事件处理函数同样会被调用2次。


1

2

3

4

5

6

7

$("#button1").bind("click",sameFunc);

$("#button1").bind("click",sameFunc);

function sameFunc()

{

    alert("func");

}

绝大部分场景下，事件处理函数都只需要绑定一次，所以一定要注意JQuery事件的重复绑定这个特性，事件多次执行，就算没有bug，终究也不是好的做法。

2、使用bind一次绑定多个事件和处理函数。

如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)：


1

2

3

$("#button1").bind("mousedown mouseup",function(){

    console.log(11);

});

如果每个事件的处理函数不同，那么可以使用如下的方式(json对象)：


1

2

3

4

5

6

7

8

9

10

$("#button1").bind(

    {

        "mousedown":function(){

            console.log("mousedown");

        },

        "mouseup":function(){

            console.log("mouseup");

        }

    }

);

3、传递event对象和自定义参数。

一般来说，使用jquery的时候我们很少需要event对象，也不需要向事件处理函数传递自定义的参数。不过如果我们真的需要这么做，JQuery也是支持的。


1

2

3

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 

    alert("params=" + eventObject.data.name); 

});

eventObject很像IE和FF中的event对象，通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数，那么JQuery会将它放在事件对象的data属性中，即通过eventObject.data就能够拿到我们传递的参数值。

4、事件取消的三种形式。

unbind用来取消之前通过bind绑定的事件处理函数，总的来说有三种形式：取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。

假如我们给button1绑定了click、mouseup、mousedown事件，其中click事件绑定2个处理函数。


1

2

3

4

5

6

7

8

9

10

11

12

13

$("#button1").bind("click",function(eventObj){ 

    console.log("click1"); 

});

$("#button1").bind("click",function(eventObj){ 

    console.log("click2"); 

});

$("#button1").bind("mouseup",function(eventObj){ 

    console.log("mouseup"); 

});

$("#button1").bind("mousedown",function(eventObj){ 

    console.log("mousedown"); 

});

$("#button1").unbind()：取消button1上所有已经绑定的事件处理函数。

$("#button1").unbind("click")：只取消button1上绑定的click类型的事件处理函数。

这2种形式很好理解，也是我们平时编程最常用的做法。上面的代码我们注册了2个click类型的事件处理函数，如果要取消第2个click事件处理函数，第1个保留，应该怎么办呢？由于我们注册的是匿名函数，所以没有办法实现。下面的代码是错误的，达不到预期的效果。


1

2

3

4

5

6

7

8

9

10

11

$("#button1").bind("click",function(eventObj){ 

    console.log("click1"); 

});

$("#button1").bind("click",function(eventObj){ 

    console.log("click2"); 

});

// try to cancel function2

$("#button1").unbind("click",function(eventObj){ 

    console.log("click2"); 

});

虽然bind和unbind是用的匿名函数功能是相同的，但是这2个函数不是同一个javascript对象，因为它们占用不同的内存空间。聪明的你可能已经想到：如果bind和unbind使用同一个函数，是不是就能达到目的了？确实是这样，下面的代码是正确的。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$("#button1").bind("click",func1);

$("#button1").bind("click",func2);

// try to cancel function2

$("#button1").unbind("click",func2);

function func1()

{

    console.log("click1"); 

}

function func2()

{

    console.log("click2"); 

}

这就是unbind的第三种使用形式，可以看到这种做法非常的不好，因为这种做法不允许使用匿名函数，我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制，个人感觉就是为了解决这个问题。

5、事件命名空间。

上面已经提到，事件命名空间就是为了解决unbind第三种形式遇到的问题。下面是JQuery官方API文档的解释：

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.

所谓事件命名空间，其实就是在事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。由于点号是用来定义命名空间的，所以如果我们使用了自定义事件，那么事件名称一定不要包含点号，否则会引起意想不到的问题。这种问题，没有尝试的必要，特殊字符能不用则不用，否则是给自己找麻烦。


1

2

3

4

5

6

7

8

9

$("#button1").bind("click.a",function(eventObj){ 

    console.log("click1"); 

});

$("#button1").bind("click.b",function(eventObj){ 

    console.log("click2"); 

});

// success to cancel function2

$("#button1").unbind("click.a");

可以看到：使用命名空间，能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提：使用了命名空间与unbind并不冲突，上面三种形式的unbind依然可以正常使用。$("#button1").unbind()依然可以取消button1上的所有事件，$("#button1").unbind("click")依然可以取消所有的click事件。这种兼容性设计是非常棒的。

使用命名空间还要1个好处：能够按照命名空间来取消事件。


1

2

3

4

5

6

7

8

9

10

11

12

13

// 2个命名空间a和b

$("#button1").bind("click.a",function(eventObj){ 

    console.log("click1"); 

});

$("#button1").bind("click.b",function(eventObj){ 

    console.log("click2"); 

});

$("#button1").bind("mouseup.a",function(eventObj){ 

    console.log("mouseup"); 

});

$("#button1").bind("mousedown.a",function(eventObj){ 

    console.log("mousedown"); 

});

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：


1

2

3

$("#button1").unbind("click.a");

$("#button1").unbind("mouseup");

$("#button1").unbind("mousedown");

方式2：


1

$("#button1").unbind(".a");

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

时间： 2024-07-29 10:27:58

Jquery中的事件命名机制的相关文章

JQuery中的事件委托机制：delegate和undelegate

考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID. <div id="parent"> <input type="button" id="a" value="1"></input> <input type="button" id="b" value="2"></i

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

jQuery：详解jQuery中的事件（一）

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

理解jquery on 委托事件的机制

前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个a,的点击事件都是用on绑定的.所以在阻止冒泡的时候不管用,今天特意来理解一下on的机制 on 是委托事件,利用的就是冒泡原理 $(selector).on(event,[selector],handler); selector 如果为空,表示的就是目标元素就是所选元素,如果有值代表的是符合所选元素的所有后代元素 实际上,事件委托的事件处理函数是当被委托的元素上的事件触发时判断e.target后执行,而不是目标元素上的事件被触发

JavaScript事件委托原理及Jquery中的事件委托

概念 事件委托,通俗来说就是将元素的事件委托给它的父级或者更外级元素处理. 事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(或文档). 事件捕获:事件开始由不太具体的节点接收,然后逐级向下传播到最具体的节点.它与事件冒泡是个相反的过程. DOM2级事件规定的事件流包括三个阶段: 事件捕获 目标阶段 事件冒泡 原理 事件委托就是利用事件冒泡机制实现的. 假设有一个列表,要求点击列表项弹出对应字段. <ul id="my

在Unity中使用事件/委托机制（event/delegate）进行GameObject之

欢迎来到unity学习.unity培训.unity企业培训教育专区,这里有很多U3D资源.U3D培训视频.U3D教程.U3D常见问题.U3D项目源码,[狗刨学习网]unity极致学院,致力于打造业内unity3d培训.学习第一品牌. 一对多的观察者模式机制有什么缺点? 如果你对如何在Unity中使用事件/委托机制还不太了解,建议您查看我的前一篇文章:[Unity3D技巧]在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信 在前一篇博客里面,我们写到