jQuery事件，方法详解

jQuery事件

事件机制

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。 JavaScript： btn.onclick = function() {}; //给这个按钮绑定事件 jQuery： $btn.click(function() {}); //给按钮绑定事件 click 是一个方法，内部是对 onclick 事件的封装

事件的发展历程（了解）

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >>  on 简单事件绑定： click(handler)                           单击事件 dbclick(handler)                      双击事件 blur(handler)                            失去焦点事件 focus(handler)                          获得焦点事件 mouseenter(handler)              鼠标进入事件 mouseleave(handler)               鼠标离开事件 keydown(handler)                   键盘按下事件 keyup(handler)                        键盘弹起事件 其他参考： http://www.w3school.com.cn/jquery/jquery_ref_events.asp bind方式 作用：给匹配到的元素直接绑定事件（不推荐，1.7以后的jQuery版本被on取代） // 绑定单击事件处理程序 第一个参数：事件类型 第二个参数：事件处理程序 $("p").bind("click mouseenter", function(e){     //事件响应方法 }); 优点：可以同时绑定多个事件，比如：bind(“mouseenter  mouseleave”, function(){}) 缺点：仍然无法给动态创建的元素绑定事件 delegate方式 作用：给匹配到的元素绑定事件，对支持动态创建的元素有效（特点：节省资源，支持动态创建的元素）（不推荐，1.7以后的jQuery版本被on取代） // 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click", function(){     //为 .parentBox下面的所有的p标签绑定事件 }); 与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件

事件绑定（重点）

我们现在用on的方式来绑定事件（最现代的方式，强烈建议使用的方式） jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法 作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点 语法： // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用 // 第四个参数：handler，事件处理函数 $(selector).on(events[,selector][,data],handler);      // 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件 $(selector).on( "click",“span”, function() {}); // 绑定多个事件 // 表示给$(selector)匹配的元素绑定单击和鼠标进入事件 $(selector).on(“click mouseenter”, function(){});

事件解绑

unbind() 方式（废弃） 作用：解绑 bind方式绑定的事件 $(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件 undelegate() 方式（废弃） 作用：解绑delegate方式绑定的事件 $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件 off解绑on方式绑定的事件（重点） //解绑 所有类型 所有事件（直接绑定的和委托的都解绑） $(selector).off(); //解绑 click事件 所有事件（直接绑定的和委托的都解绑） $(selector).off(“click”); //解绑 click事件 只解绑委托的 $(selector).off( “click”, “**” ); //第二个参数表示的是要找委托的 选择器“** ” 表示选择所有委托的

事件触发

简单事件触发 $(selector).click(); //触发 click事件 trigger方法触发事件 $(selector).trigger(“click”); triggerHandler触发 事件响应方法，不触发浏览器行为 比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);

jQuery事件对象介绍

event.type                                         事件类型：click，dbclick… event.which                                       鼠标的按键类型：左1 中2 右3 event.pageX                                      鼠标相对于页面左边的位置 event.target                                       触发该事件的元素（事件目标） event.currentTarget                         当前对象（相当于this） event.delegateTarget                      代理对象 event.keyCode                                 键盘按键代码 event.stopPropagation()；              阻止事件冒泡 event.prev entDefault();                     阻止默认行为 return false; event.data                                         传递给事件处理程序的额外数据 return false; // 也具有阻止冒泡和阻止默认行为的功能 this：事件处理函数被哪个元素对象调用，this就指向哪个元素对象。

jQuery补充（了解）

链式编程

// 链式编程代码示例 $(“li”).parent(“ul”).parent().siblings(“div”).children(“div”).html(“内容”); 链式编程原理：return this; 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态。

隐式迭代

隐式迭代：在方法的内部会对匹配到的所有元素进行循环遍历，执行相应的方法；无需我们再手动地进行循，方便我们使用。 // 设置操作 $(“div”).css(“color”, “red”); 如果是获取多个元素的值，大部分情况下返回第一个元素的值。 // 获取操作 $(“div”).css(“color”); // 返回第一个元素的值

each方法

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。但是如果要对每个元素做不同的处理，这时候就要用each方法了。 作用：遍历jQuery对象集合，为每个匹配的元素执行一次指定函数 // 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function(index,element){});

多库共存

此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量名。当在一个页面中引用了jQuery，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量名，这时就有了多库共存的问题。 // 模拟另外的库使用了 $ 这个变量名。此时，就与jQuery库产生了冲突 var $ = { name : “itecast” }; 解决方式： //让jQuery释放对$的控制权，让其他库能够使用$。此后，只能用jQuery来调用jQuery提供的方法 $.noConflict();

jQuery插件（了解）

jQuery虽然功能强大，但也不是包含所有的功能，可以通过插件来扩展它的功能： 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。 （联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）

使用插件

jQuery.color.js animate()自定义动画：不支持背景的动画效果 animate动画支持的属性列表 使用步骤： 1.引入jQuery文件 2.引入插件 3.使用插件

制作插件

如何创建jQuery插件： http://learn.jquery.com/plugins/basic-plugin-creation/ 为$函数扩展方法 $.pluginName = function() {}; 为jQuery对象扩展方法 $.fn. pluginName = function() {};

jQueryUI

使用场景：网站的管理后台 jQueryUI专指由jQuery官方维护的UI（用户接口）方向的插件。 官方API： http://api.jqueryui.com/category/all/ 其他教程： jQueryUI教程 基本使用: 1.引入jQueryUI的样式文件 2.引入jQuery 3.引入jQueryUI的JS文件 4.使用jQueryUI功能 �� 2 ҳ

---

传智播客 前端与移动开发学院     http://web.itcast.cn