jQuery基础教程之如何注册以及触发自定义事件
2012-04-01 15:52
741 查看
在不知道jquery中可以注册自定义事件之前,经常看到很多牛人写的插件中,有用到:
bind(“originevent”,function(){…});
由于当时不知道jquery中可以自定义事件,所以看得一头雾水,不知所谓。
javscript中的常用的事件有如下的一些类型:
blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,和error等等
那么如何注册以及触发我们自己自定的事件呢?
jquery中提供了两种方法可以绑定自定义事件:
bind()和one()
而绑定的自定义事件的触发,必须得用jquery中的
trigger()方法才能触发。
下面来看两个在线DEMO,分别是用bind和one方法绑定自定义事件以及触发自定义事件:
首先是用bind()方法:
看代码:
看上面的代码,我们首先给h3标签用bind()方法绑定了一个自定义的事件“test”,触发这个事件会弹出对话框,显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件,在这个单击事件中,我们用了两次trigger方法来触发自定义事件,当我们点击这个按钮之后会触发两次h3标签绑定的自定义事件,结果就会弹出两次对话框。下面看在线DEMO:
然后大家再看一下用one()方法注册和触发自定义事件:
看上面的代码,我们首先给h3标签用one()方法绑定了一个自定义的事件“test”,触发这个事件会弹出对话框,显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件,在这个单击事件中,我们用了两次trigger方法来触发自定义事件,但是当我们点击这个按钮之后只会触发一次h3标签绑定的自定义事件,结果就只会弹出一次对话框,因为我们的自定义事件是用jquery中的one()方法绑定的,下面看在线DEMO:
bind(“originevent”,function(){…});
由于当时不知道jquery中可以自定义事件,所以看得一头雾水,不知所谓。
javscript中的常用的事件有如下的一些类型:
blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,和error等等
那么如何注册以及触发我们自己自定的事件呢?
jquery中提供了两种方法可以绑定自定义事件:
bind()和one()
而绑定的自定义事件的触发,必须得用jquery中的
trigger()方法才能触发。
下面来看两个在线DEMO,分别是用bind和one方法绑定自定义事件以及触发自定义事件:
首先是用bind()方法:
看代码:
01 | < h3 >梦三秋博客</ h3 > |
02 | < input type = "button" value = "点击我触发H3绑定的自定义事件" id = "demo" > |
03 | < script > |
04 | $(function(){ |
05 | $("h3").bind("test",function(){ |
06 | alert($(this).text()); |
07 | }); |
08 | $("#demo").click(function(){ |
09 | $("h3").trigger("test"); |
10 | $("h3").trigger("test"); |
11 | }); |
12 | }); |
13 | </ script > |
然后大家再看一下用one()方法注册和触发自定义事件:
01 | < h3 >梦三秋博客</ h3 > |
02 | < input type = "button" value = "点击我触发H3绑定的自定义事件" id = "demo" > |
03 | < script > |
04 | $(function(){ |
05 | $("h3").one("test",function(){ |
06 | alert($(this).text()); |
07 | }); |
08 | $("#demo").click(function(){ |
09 | $("h3").trigger("test"); |
10 | $("h3").trigger("test"); |
11 | }); |
12 | }); |
13 | </ script > |
相关文章推荐
- jQuery基础教程之如何注册以及触发自定义事件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- jquery如何扑捉回车键触发的事件
- jquery中如何实现按回车触发按钮事件
- jQuery基础教程之jquery事件
- 我谈Silverlight架构和模式运用1-- ModelView模式最简单教程-讲解无代码触发事件,以及类型转换器的强大功能
- jquery 获取所有兄弟节点、父亲兄弟的子节点以及自动触发事件
- jQuery如何使用自动触发事件trigger
- jquery傻瓜基础教程之教你如何制作jquery插架一
- 【读书笔记】【jQuery基础教程】【第三章--事件】
- 如何点击一个按钮 分别触发两个jquery事件
- JQuery基础教程:事件(下)
- Android基础教程之Button事件触发AlertDialog简单小窗口的应用
- JQuery的自定义事件代码,触发,绑定简单实例
- jquery傻瓜基础教程之教你如何制作简单的dialog插件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- PB如何触发带参数的自定义事件
- jquery基础教程二(鼠标点击事件)
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- Laravel 5.1 定义事件、事件监听器以及触发事件实例教程