jQuery事件使用
来源:互联网 发布:mac 股票交易 编辑:程序博客网 时间:2024/05/24 07:14
jQuery绑定事件多个方法:
1.直接使用类click方法:$(ele).click(fn);
2.使用bind方法(只能将事件绑定到指定的元素上)
4.使用delegate方法绑定事件(只能将事件方法委托给子元素)
5.使用on方法绑定事件(是上面几个绑定方法的底层实现,可以直接调用on方法实现上面所有功能)
6.触发事件使用trigger
7.触发事件而又不引起浏览器的默认行为使用triggerHandler
8.解除绑定使用unbind
9.解除委托使用undelegate
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
- Jquery使用Textchange事件
- Jquery事件简单使用
- jQuery事件使用
- 使用jQuery绑定事件注意事项
- jquery键盘事件使用介绍
- 19、使用jQuery管理事件
- jquery键盘事件使用介绍
- jquery事件 trigger()的使用
- jQuery事件对象的使用
- JQuery 自定义事件的使用
- jquery事件函数无法使用
- jquery中使用trigger()方法模拟事件
- 使用jquery获取iframe加载完成事件
- jQuery入门-使用选择器和事件
- jquery事件与函数的使用介绍
- 不要使用jQuery触发原生事件
- jquery插件中的事件 使用方式
- 使用jQuery卸载绑定的事件
- jquery checkbox勾选/取消勾选的诡异问题
- 解决struts中404.do问题
- JSP中的taglib标签如何让JSP页面使用标签
- Centos7下安装配置Redis3.0.6
- 运维基础——Zabbix 添加磁盘空间监控
- jQuery事件使用
- IntelliJ IDEA创建JavaWeb工程及配置Tomcat部署
- matlab 画三维图
- Python网页抓取之Beautiful Soup
- 程序设计模式(三) C++ Builder模式
- STM32烧录程序之后外设不工作
- 在win8系统上通过pip为python2.7.13安装scipy包
- tomcat热启动
- mapreduce 的工作机制