jQuery基础教程之如何注册以及触发自定义事件

来源：互联网发布：锐捷网络路由器编辑：程序博客网时间：2024/06/03 04:50

在不知道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()方法：
看代码：

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>

看上面的代码，我们首先给h3标签用bind()方法绑定了一个自定义的事件“test”，触发这个事件会弹出对话框，显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件，在这个单击事件中，我们用了两次trigger方法来触发自定义事件，当我们点击这个按钮之后会触发两次h3标签绑定的自定义事件，结果就会弹出两次对话框。下面看在线DEMO：

然后大家再看一下用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>

看上面的代码，我们首先给h3标签用one()方法绑定了一个自定义的事件“test”，触发这个事件会弹出对话框，显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件，在这个单击事件中，我们用了两次trigger方法来触发自定义事件，但是当我们点击这个按钮之后只会触发一次h3标签绑定的自定义事件，结果就只会弹出一次对话框，因为我们的自定义事件是用jquery中的one()方法绑定的，下面看在线DEMO：