jQuery事件机制

1 事件操作

1.1 页面载入事件

$(document).ready(function(){ ?// 在这里写你的代码...});或者$(function($) { ?// 你可以在这里继续使用$作为别名...});

1.2 事件绑定

on(eve,[sel],[data],fn) ?????1.7+ 在选择元素上绑定一个或多个事件的事件处理函数bind(type,[data],fn) ????????3.0- 请使用on()one(type,[data],fn) ???????????为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

1.3 解除事件绑定

off(eve,[sel],[fn]) ????????1.7+ 在选择元素上移除一个或多个事件的事件处理函数unbind(t,[d|f]) ???????????????3.0- 请使用off()

1.4 触发事件

trigger(type,[data]) ????????在每一个匹配的元素上触发某类事件triggerHandler(type, [data]) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡这个方法的行为表现与trigger类似，但有以下三个主要区别：* 第一，他不会触发浏览器默认事件。* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

1.5 事件委派

live(type,[data],fn) ???1.7-die(type,[fn]) ???????????1.7-delegate(s,[t],[d],fn) ???3.0-undelegate([s,[t],fn]) ???3.0-全部移除了，请使用 on()

$(document).on(‘click‘, ‘button‘, fn)

1.6 事件切换

hover([over,]out) ??????????一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法toggle([spe],[eas],[fn]) ??1.9-用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

2 事件列表

blur([[data],fn])change([[data],fn])click([[data],fn])dblclick([[data],fn])error([[data],fn])focus([[data],fn])focusin([data],fn) ????????????当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况focusout([data],fn) ???当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。keydown([[data],fn])keypress([[data],fn])keyup([[data],fn])mousedown([[data],fn])mouseenter([[data],fn]) ???当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。mouseleave([[data],fn]) ???当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。mousemove([[data],fn])mouseout([[data],fn])mouseover([[data],fn])mouseup([[data],fn])resize([[data],fn])scroll([[data],fn])select([[data],fn])submit([[data],fn])unload([[data],fn])

3 事件对象

属性

eve.currentTarget ???????在事件冒泡阶段中的当前DOM元素eve.data ???????????????当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bindeve.delegateTarget ???????1.7+ 当currently-called的jQuery事件处理程序附加元素eve.namespace ???????????当事件被触发时此属性包含指定的命名空间eve.pageX ???????????????鼠标相对于文档的左边缘的位置eve.pageY ???????????????鼠标相对于文档的顶部边缘的位置eve.relatedTarget ???????在事件中涉及的其它任何DOM元素eve.result ???????????????这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefinedeve.target ???????????????最初触发事件的DOM元素eve.timeStamp ???????????返回事件触发时距离1970年1月1日的毫秒数eve.type ???????????????事件类型eve.which ???????????????针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

方法

eve.preventDefault() ???????????阻止默认事件行为的触发eve.isDefaultPrevented() ???????根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值eve.stopPropagation() ???????????防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数eve.isPropagationStopped() ???????检测 event.stopPropagation() 是否被调用过eve.stopImmediatePropagation() ????阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上eve.isImmediatePropagation() ????检测 ev

ent.stopImmediatePropagation() 是否被调用过

动画效果

1. 基本效果

show([s,[e],[fn]]) ???????显示隐藏的匹配元素hide([s,[e],[fn]]) ???????隐藏显示的元素toggle([s],[e],[fn]) ???如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

参数详解

speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

slideDown([s],[e],[fn]) ???????通过高度变化（向下增大）来动态地显示所有匹配的元素slideUp([s,[e],[fn]]) ???????通过高度变化（向上减小）来动态地隐藏所有匹配的元素slideToggle([s],[e],[fn]) ???通过高度变化来切换所有匹配元素的可见性

参数详解

speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。

3 淡入淡出效果

fadeIn([s],[e],[fn]) ???????通过不透明度的变化来实现所有匹配元素的淡入效果fadeOut([s],[e],[fn]) ???????通过不透明度的变化来实现所有匹配元素的淡出效果fadeToggle([s,[e],[fn]]) ???通过不透明度的变化来开关所有匹配元素的淡入和淡出效果fadeTo([[s],o,[e],[fn]]) ???把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

参数详解

speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn ???????: 在动画完成时执行的函数，每个元素执行一次。opacity ???: (用户fadeTo)一个0至1之间表示透明度的数字。

4 自定义动画

animate(p,[s],[e],[fn])

参数详解

params ???: 一组包含作为动画属性和终值的样式属性和及其值的集合speed ???: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing ???: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".fn ???????: 在动画完成时执行的函数，每个元素执行一次。

5 动画控制

stop([c],[j]) ???????停止所有在指定元素上正在运行的动画delay(d,[q]) ???????设置一个延时来推迟执行队列中之后的项目finish([queue]) ???????停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

6 设置

//关闭页面上所有的动画jQuery.fx.off = true;

工具和其他操作

1 jQuery 对象访问

each(callback) ???????????????遍历jquery domsize() ???????????????????????1.8- 返回dom集合中的个数 同lengthlength ???????????????????????返回dom集合中的个数selector ???????????????????返回选择器context ???????????????????????返回原生js domget([index]) ???????????????获取dom集合中一个index([selector|element]) ???索引值toArray() ???????????????????转为纯数组

2 数组和对象操作

$.each(object,[callback]) ???????遍历数组 对象$.extend([d],tgt,obj1,[objN]) ???合并对象 合并到第一个参数$.grep(array,fn,[invert]) ???????过滤数组$.makeArray(obj) ???????????????把类数组对象变为数组$.map(arr|obj,callback) ???????????操作数组的每一单元$.inArray(val,arr,[from]) ???????判断值是否在数组中$.merge(first,second) ???????????合并数组$.unique(array) ???????????????????去重$.parseJSON(json) ???????????????解析json$.parseXML(data) ???????????????解析xml

3 类型检测

$.contains(c,c) ???????????判断一个元素是否是另一个元素的后代吗元素$.type(obj) ???????????????判断类型$.isarray(obj) ???????????是否为数组$.isFunction(obj) ???????是否是function$.isEmptyObject(obj) ???是否为空对象$.isPlainObject(obj) ???是否为纯粹的对象$.isWindow(obj) ???????????是否是window对象$.isNumeric(value) ???????1.7+是否是number

4 其他操作

$.trim(str) ???????????????????去除左右两边的空格$.param(obj,[traditional]) ???把对象或数组 转为 特殊格式的字符串 序列化

jQuery事件机制，动画效果，工具和其他操作（三）

原文地址：https://www.cnblogs.com/wanglecn/p/9507720.html