jQuery事件处理的特征(事件命名机制)_jquery

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

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

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

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

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

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

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

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

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

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

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

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

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

$("#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个处理函数。

$("#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个保留,应该怎么办呢?由于我们注册的是匿名函数,所以没有办法实现。下面的代码是错误的,达不到预期的效果。

$("#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使用不同函数,是不是就能达到目的了?确实是这样,下面的代码是正确的。

$("#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当前事件类型的别名,即事件命名空间。由于点号是用来定义命名空间的,所以如果我们使用了自定义事件,那么事件名称一定不要包含点号,否则会引起意想不到的问题。这种问题,没有尝试的必要,特殊字符能不用则不用,否则是给自己找麻烦。

$("#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个好处:能够按照命名空间来取消事件。

// 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:

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

方式2:

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

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

以上所述是小编给大家介绍的jQuery事件处理的特征(事件命名机制),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
事件机制
jquery事件命名空间、jquery事件处理机制、jquery 事件机制、jquery 绑定事件机制、jquery 事件命名,以便于您获取更多的相关知识。

时间: 2024-08-01 07:08:36

jQuery事件处理的特征(事件命名机制)_jquery的相关文章

jQuery unbind 删除绑定事件详解_jquery

unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值 : jQuery 参数 : type (String) : (可选) 事件类型 data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事

jQuery简单获取键盘事件的方法_jquery

本文实例讲述了jQuery简单获取键盘事件的方法.分享给大家供大家参考,具体如下: 一.我们什么时候要用到获取键盘事件 做web的时候,为了更人性的设计,我们有的时候会用到键盘事件.例如:输入框下拉提示框,通过键盘的上下键盘来选择自己想要的内容,google的输入框的下拉提示.当我们浏览相册的时候,我们可以能过键盘的左右键,来查看相片.当我们浏览长篇小说,用鼠标滚动很容易不知道看到哪一个行了,可以通键盘上下键来进行翻页,这些小细节也是非常重要的.做网站很大程度在于细节的处理. 二.jquery的

jQuery 处理页面的事件详解_jquery

在之前dom操作中提到了javascript对事件处理的介绍.由于不同浏览器处理事件各不相相同,这给开发者带来了不必要的麻烦,jQuery的方便的解决了这个方面的麻烦. 1.绑定事件监听 (http://www.jb51.net/article/60096.htm)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的区别,并对多个监听事件执行顺序和方式也不相同. 在jQuery中,通过bind()对事件绑定,相当于IE浏览器的attachEvent()和标准DOM的addEve

读jQuery之十一 添加事件核心方法_jquery

这篇看看其源码,这个add定义如下(省略大部分) 复制代码 代码如下: add: function( elem, types, handler, data ) { if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; } ... } 定义了四个参数elem.types.handler和data分别为HTMLElement.事件类型(如click).事件响应函数.数据.此外,types 可以以空格分开传多种事件("mouseover

jQuery javaScript捕获回车事件(示例代码)_jquery

复制代码 代码如下: function getEnter(obj,evt){if(evt.keyCode == 13){var target = $(":input").not(":radio,select,:reset");for(var i=0;i<target.length;i++){if(target.get(i).name==obj.name){i++;if(i==target.length-1){$(target.get(i)).focus();/

jQuery新的事件绑定机制on()示例应用_jquery

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

jquery新的绑定事件机制on方法的使用方法_jquery

浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的

关于jQuery新的事件绑定机制on()的使用技巧_jquery

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

深入浅出 jQuery中的事件机制_jquery

首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义: //ready的作用,是为具体加载的实现. $(document