jQuery事件使用

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

jQuery事件使用相关推荐

第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册单个事件注册语法: element.事件(function() ...
JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
jQuery事件之鼠标事件
jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...

jQuery事件使用

jQuery事件使用相关推荐

最新文章

热门文章