?直接写一个函数执行逻辑,并在click 时 处理不是更好?为何要采用自定义事件的方式呢?
对于jQuery自定义事件,很多JavaScript开发者都会有所疑惑:在日常开发过程中会不会用到呢?而本文将结合一个开发案例,其中的一些地方应用到了jQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则。
51CTO推荐专题: jQuery从入门到精通
问题
一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当前的选中状态?
答案
其实没有什么标准答案,用传统的方式,写一个函数:
- var onClick=function(dom){//复选框x的Click事件的处理逻辑};
当仅仅需要执行处理逻辑而不改变复选框的状态时:
- onClick(X);//X引用复选框
为了响应用户直接点击复选框,你还需要为复选框X添加相应的Click处理函数:
- $(X).click(function(evt){ //执行处理逻辑 onClick(this);});
但是,我要说的是,这里可以利用自定义事件处理函数封装复选框Click事件的处理逻辑!然后触发该自定义事件。而且个人觉得具有必要性和优点:
1,onClick的逻辑是属于复选框自身的,没有必要用一个全局方法来定义并剥离复选框对象。
从面向对象的角度说,对象由属性和行为(方法)构成,所以onClick的逻辑可以封装在复选框的作用域(context)内。
2,充分利用匿名函数,减少全局变量或者函数的数量,有利于提高脚本的执行效率。
代码示例
1,首先定义一个变量$x引用缓存我们的复选框对象。这点非常重要但很多js开发员没有意识到:每调用一次jQuery的$方法选中某个元素=遍历一次html dom树。所以要学会利用JavaScript变量缓存对象。
- var $x=$(X);
2,定义一个自定义事件evtClick,封装处理逻辑。
- $x.bind("evtClick",function(evt){ //onClick的处理逻辑});
3,当要执行处理逻辑又不想改变复选框的选中状态时,利用trigger方法触发evtClick事件。
- $x.trigger("evtClick");
4,click事件。
- $x.click(function(evt){ $x.trigger("evtClick");});
jQuery触发自定义事件并传参
- $("input").bind("myevent",function(event,msg1,msg2){
- alert("msg1:"+msg1);
- })
- $("input").click(function(){
- $("input").trigger("myevent",["avalue","bvalue"])
- });
- $("input").bind("myevent",function(event,msg1,msg2){
- alert("msg1:"+msg1);
- })
- $("input").click(function(){
- $("input").trigger("myevent",["avalue","bvalue"])
- });
自定义事件:
- var Common = {};
- Common.Dialog = function(config){};
- Common.Dialog.prototype = {
- height:310,
- init: function(){
- jQuery.event.trigger("submit");
- }
- };
- var dlg = new Common.Dialog({height:200});
- $(dlg).bind("submit",function(){alert("submit event")});
- dlg.init();