jQuery事件使用

来源:互联网 发布:mac 股票交易 编辑:程序博客网 时间:2024/05/24 07:14
jQuery绑定事件多个方法:
1.直接使用类click方法:$(ele).click(fn);
2.使用bind方法(只能将事件绑定到指定的元素上)

3.使用one方法(绑定的事件执行一次就删除,其他功能和bind方法相同)

    //1.1 简单绑定click事件/*$("#block1").click(function(evt){console.log(evt);});*///1.2 绑定可传入数据参数的click事件/*$("#block1").click({name:"jack"},function(evt){console.log(evt);});*///2.1 使用bind方法简单绑定click方法/*$("#block1").bind("click",function(evt){console.log(evt);});*///2.2 使用bind方法绑定带数据的click方法/*$("#block1").bind("click mouseenter",{name:"jack"},function(evt){console.log(evt);});*/


4.使用delegate方法绑定事件(只能将事件方法委托给子元素)
5.使用on方法绑定事件(是上面几个绑定方法的底层实现,可以直接调用on方法实现上面所有功能)

    //4.1 使用delegate方法给子元素绑定事件/*$("#block1").delegate("#block2","click",function(evt){console.log(evt);});*///4.2 使用delegate方法给子元素绑定带数据的事件方法/*$("#block1").delegate("#block2","click mouseenter",{name:"jack"},function(evt){console.log(evt);});*///5.1 使用on方法简单绑定click事件/*$("#block1").on("click",function(evt){console.log(evt);});*///5.2 使用on方法绑定多个事件并且传进去数据参数/*$("#block1").on("click mouseenter",{name:"jack"},function(evt){console.log(evt);});*///5.3 使用on方法绑定事件使用委托/*$("#block1").on("click","#block2",function(evt){console.log(evt);});*///5.4 使用on方法绑定事件使用委托并传递数据/*$("#block1").on("click","#block2",{name:"jack"},function(evt){console.log(evt);});*/

    //绑定自定义命名空间的事件/*$("#block1").bind("click.my",function(evt){console.log(evt);});$("#block1").bind("click.om",{name:"jack"},function(evt){console.log(evt);});function fn1(evt){console.log(evt);}$("#block1").bind("click.ta",{age:20},fn1);*/


6.触发事件使用trigger
7.触发事件而又不引起浏览器的默认行为使用triggerHandler
8.解除绑定使用unbind
9.解除委托使用undelegate

10.解除事件都可以使用off

    //解除绑定//1.$(ele).unbind();解除绑定这个元素的所有事件//2.$(ele).unbind("click");解除绑定这个元素的所有click事件,包括自定义的类似于click.myplguin的事件//3.$(ele).unbind("click.my");解除绑定这个元素的click事件的my插件//解除绑定自定义命名空间的事件,如果是$("#block1").unbind("click")则可以解除所有的click事件//4.$(ele).unbind("click",fn1);解除绑定指定的事件处理方法//5.$(ele).unbind("click.ta",fn1);解除绑定指定的事件指定类型的处理方法/*$("#block1").unbind("click.my");$("#block1").unbind("click.ta",fn1);*///触发自定义事件/*function fn2(arg,arg2,arg3){console.log(arg);console.log(arg2);console.log(arg3);}$("#block1").bind("click.me",fn2);$("#block1").bind("click",function(evt){console.log(evt);});$("#block1").trigger("click.me",[{name:"jack"},{age:20}]);*///触发完全自定义事件/*function fn3(arg,arg2,arg3){console.log(arg);console.log(arg2);console.log(arg3);}$("#block1").bind("myevt.me.he.ji",fn3);$("#block1").bind("myevt",function(evt){console.log(evt);});$("#block1").trigger("myevt.me.he",[{name:"jack"},{age:20}]);*///触发自定义事件而又不引发浏览器默认事件triggerHandler/*$("#old").click(function(){$("input").trigger("focus");});$("#new").click(function(){$("input").triggerHandler("focus");});$("input").focus(function(){$("<span>Focused!</span>").appendTo("body").fadeOut(1000);});*///$("#old").get(0).click();/*function diandian(){console.log("diandian");}$("#old2").get(0).click();*///$("input[type=file]").get(0).click();//解除绑定事件 unbind,但是解除不了委托的事件/*$("body").delegate("#old","click",function(){console.log("ko");});$("#old").get(0).click();$("#old").unbind("click");$("input[type=text]").focus();$("input[type=text]").get(0).blur();$("input[type=text]").get(0).focus();$("input[type=text]").unbind("focus",false);$("input[type=text]").get(0).blur();$("input[type=text]").get(0).focus();*///解除事件的委托/*$("body").delegate("button","click",function(){console.log("delegate_button_click");});*/


11.事件切换hover,toggle


0 0
原创粉丝点击