jQuery基础教程之如何注册以及触发自定义事件
2012-08-27 11:12
295 查看
在不知道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()方法绑定的
原文来自:http://www.skygq.com/2011/02/15/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%B9%8B%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8C%E4%BB%A5%E5%8F%8A%E8%A7%A6%E5%8F%91%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
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 > |
原文来自:http://www.skygq.com/2011/02/15/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%B9%8B%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8C%E4%BB%A5%E5%8F%8A%E8%A7%A6%E5%8F%91%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
相关文章推荐
- jQuery基础教程之如何注册以及触发自定义事件
- c#中事件Event声明和触发,以及自定义事件委托和系统委托EventHandler
- PB如何触发带参数的自定义事件
- ABAP: 如何让ALV Tree的注册事件在屏幕PAI之后触发
- C#如何创建自定义控件以及添加自定义属性和事件使用
- iframe如何触发父元素事件以及父页面控制iframe子页面元素
- c#中如何截取Windows消息来触发自定义事件
- C#中如何截取Windows消息来触发自定义事件
- 如何触发自定义事件
- 使用kafka作为springcloud bus的消息总线,以及如何自定义总线事件
- c#中如何截取Windows消息来触发自定义事件
- 如何创建自定义winForm控件 以及添加事件属性
- 【PB】如何触发带参数的自定义事件?
- 关于短信的读取以及新短信到达时如何触发事件去处理自己的逻辑
- 【PB】如何触发带参数的自定义事件?
- caffe如何自定义网络以及自定义层(python)(六)
- 跳出手掌心--如何立即触发UIButton边界事件
- 《WF编程》系列之19 - 触发事件与调用方法:服务以及工作流的实现 3.2.3.2服务的实现
- 事件冒泡导致栈内存溢出以及jquery的trigger触发事件的问题
- android中事件的分析(触发以及分发处理)