使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦。jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的各种传递。
例如,我要点击一个button,现在要将这个点击事件抛出来,从其他任何想要的地方去接收;
这个是button
<button name="btn" onclick="clickbtn()">按钮</button>
js:
1 var btn=$("button"); 2 btn.bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);}); 3 function clickbtn(){ 4 btn.trigger("evtClick",["value1","value2"]); 5 }
第一行,通过jQuery获得这个dom元素对象
第二行,添加一个事件监听evtClick,并对其实现处理方法
第三行,在clickbtn中添加事件触发,事件的名字叫做“evtClick”,并且传递一个数组存放所有的传递的参数,第二行,事件处理部分就按照这个传递的规则实现
几行代码就实现了事件抛出机制。当然,这样写或许再少一行代码:
1 $("button").bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);}); 2 function clickbtn(){ 3 $("button");.trigger("evtClick",["value1","value2"]); 4 }
循环创建多个div,抛出事件到外部对象:
1 for (var i=0; i < 10; i++) { 2 var myJimmy = new Jimmy(1,"www.bai1du.com"+i,"jimmychu"); 3 var btn=myJimmy.createButton(); 4 btn.type="button"; 5 btn.value="按钮"+i; 6 body.appendChild(btn); 7 var btnJQuery=jQuery(btn);//所有需要使用jquery的dom必须要用jQuery包装起来 8 (function(btn,obj){ 9 btn.click(function(){ 10 btn.trigger("evtClick",[obj.url]); 11 }); 12 })(btnJQuery,myJimmy); 13 btnJQuery.bind("evtClick",function(evt,v1){alert(v1);});//可以写到外部调用该对象的类里边,实现事件的传递 14 }
注意:jQuery中事件名称不能与函数方法名称相同,如果相同则不能进入方法
如上述触发的事件为“evtClick”,不能有如下的函数
function evtClick(){ //something }