JavaScript加强之自定义event事件 |
本文标签:event事件 复制代码 代码如下: $().ready(function(){ for(var i=0;i<5;i++){ /** * 这种写法不专业,如果处于循环里,就会注册5次事件,点击后alert5次 */ // $("#aa").click(function(){ // alert("hahahaha"); // }); /** * 这种写法才是专业的,在注册一次点击事件前,先解绑点击事件,然后再绑定一个点击事件,所以到最后只绑定了一次点击事件 */ $("#aa").unbind("click"); $("#aa").bind("click",function(){ alert("oooooo"); }); } }); 自定义事件: 复制代码 代码如下: $().ready(function(){ /** * 自定义事件,在click的时候进行触发 */ $("#aa").bind("click",function(){ //事件触发器,触发自定义的event $(this).trigger("点我"); }); //自定义一个"点我"事件 $("#aa").unbind("点我"); $("#aa").bind("点我",function(){ alert("点我"); }); }); 传递参数的自定义事件: 复制代码 代码如下: $().ready(function(){ /** * 自定义事件,在click的时候进行触发 */ $("#aa").bind("click",function(){ //事件触发器,触发自定义的event,传递实参 $(this).trigger("点我",[张三,李四]); }); //自定义一个"点我"事件 $("#aa").unbind("点我"); //第一个参数是固定的,后面都是自定义,就算把event写成别的名字,它还是固定类型,鼠标事件 $("#aa").bind("点我",function(event,a,b){ alert("点我"); alert(a); alert(b); }); }); 练习: 写一个自定义事件,把该事件绑定在一个下拉列表框中 当下拉列表框选中一项的时候,触发该事件,以参数的形式把选中的值传递到自定义事件中,并输出 。 html: 复制代码 代码如下: <select id="select"> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> </select> js: 复制代码 代码如下: $().ready(function(){ $("option").unbind("click"); $("option").bind("click",function(){ $(this).trigger("选择并显示",[$(this).val()]); }); $("option").unbind("选择并显示"); $("option").bind("选择并显示",function(event,value){ alert(value); }); }); |