jQuery事件
事件处理
| 方法 | 描述 |
| bind(eventType, function) bind(eventType, data, function) |
为jQuery对象内含元素添加一个事件处理函数，支持可选的data参数 |
| bind(eventType, boolean) | (可用于)生成一个总是返回false的事件处理函数以阻止事件的默认行为。这个布尔型参数决定是否允许事件冒泡 |
| bind(map) | 使用JavaScript的对象字面量map为jQuery对象内含元素一次添加多个事件处理函数 |
| one(eventType, function) | 为jQuery对象内含元素添加一个事件处理函数，支持可选的data参数;该事件处理函数一旦被触发执行就会自动撤销绑定(至多执行一次) |
| unbind() | 撤销之前绑定在jQuery对象内含元素上的所有处理函数 |
| unbind(eventType) | 撤销之前绑定在jQuery对象内含元素上的某一事件的处理函数 |
| unbind(eventType, boolean) | 解除(为抑制事件默认行为而)绑定在jQuery对象内含元素上的总是返回false的事件处理函数 |
| unbind() | 移除Event对象对应的事件处理函数 |
当jQuery调用事件处理函数时，this变量被设置为时间绑定的元素。传递给事件处理函数的Event对象时jQuery加工之后的Event对象，并非原生DOM标准中定义的Event对象。
jQuery Event对象成员一览表
| 名字 | 描述 | 返回值 |
| currentTarget | 返回正在处理(响应)该事件的元素 | HTMLElement |
| Data | 返回绑定时间时传递给bind()方法的可选data对象 | Object |
| isDefaultPrevented() | 若已经调用过preventDefault()方法，返回true | Boolean |
| isImmediatePropagation() | 若已经调用过stopImmediatePropagation()方法，返回true | Boolean |
| isPropagationStopped() | 若已经调用过stopPropagation()方法，返回true | Boolean |
| originalEvent | 返回未经jQuery加工的原始Dom Event对象 | Event |
| pageX pageY |
返回相对于页面左上角鼠标位置 | number |
| preventDefault() | 阻止当前事件的默认行为 | void |
| relatedTarget | 仅对鼠标事件有效，返回该鼠标事件有关的元素(随鼠标事件的类型变化而变化) | HTMLElement |
| Result | 返回处理该事件的最后一个事件处理函数的返回值 | Object |
| stopImmediatePropagation() | 立即阻止调用当前事件的其他事件处理函数 | void |
| stopPropagation() | 阻止事件冒泡，但允许正在响应事件的元素处理该事件 | void |
| Target | 返回触发事件的元素 | HTMLElement |
| timestamp | 返回事件发生的时间 | number |
| Type | 返回事件类型 | string |
| Which | 在键盘和鼠标事件中，返回用户按下的键或者鼠标按钮 | number |
阻止默认事件
调用e.preventDefault()方法。
$().bind("",false);
return false;
动态绑定事件处理函数
bind()方法绑定的事件处理函数不会应用到后来添加到Dom的新元素上。
支持自动绑定事件处理函数的方法
| 方法 | 描述 |
| on(events, selector, data, function) on(map, selector, data) |
为匹配选择器的元素(现在匹配或将来匹配)定义处理函数jQuery |
| off(events, selector, data, function) off(map, selector, data) |
撤销使用on方法绑定的所有事件处理函数 |
| deledate(selector, eventType, function) deledate(selector, eventType, data, function) deledate(selector, map) |
如果jQuery对象包含元素内有匹配(或将来匹配)制定选择器的元素，则为其绑定事件处理函数 |
| undeledate() undeledate(selector, eventType) |
撤销delegate方法绑定且匹配选择器与事件类型的事件处理函数 |
on方法并非直接把事件处理函数绑定到目标元素。实际上，他是在父级对象上绑定了一个事件处理函数，该函数在事件发生时，检查触发事件的元素是否匹配选择器。一旦事件与元素匹配成功，就调用绑定的事件处理函数。
人工调用事件处理函数
用于人工调用事件处理函数的方法
| 方法 | 描述 |
| trigger(eventType) | 触发绑定在jQuery对象内含元素特定事件类型(由eventType指定)上的事件处理函数 |
| trigger(Event) | 触发绑定在jQuery对象内含元素特定事件类型(Event指定)上的事件处理函数 |
| triggerHandler(eventType) | 触发绑定在jQuery对象内含的第一个元素上的事件处理函数，既不冒泡，也不实施事件的默认行为 |
如果需要一个事件处理函数内部调用其他元素的(同类型)事件处理函数，使用Event对象指定要人工调用的其他元素的事件处理函数。
|
1
2
3
4
5
6
7
8
|
$("#row1 img").bind("mouseenter", function(){ $(this).css("border", "thick solid red");});$("#row2 img").bind("mouseenter", function(e){ $(this).css("border", "thick solid blue"); $("#row1 img").trigger(e);}); |
triggerHandler方法
triggerHandler方法不会执行事件的默认行为，也不允许事件沿DOM树向上冒泡。而且，不同于trigger方法，triggerHandler方法只针对jQuery对象中包含的第一个元素调用事件处理函数。
triggerHandler方法的返回值是事件处理函数的返回值(而不是Jquery对象)，因此不能在调用triggerHandler方法后链式调用jQuery方法。
事件快捷方法
|
1
2
3
|
$("img").mouseenter(function(){ $(this).css("border", "thick solid red");}); |
|
1
2
3
4
5
6
7
8
|
$("img").mouseenter(function(){ $(this).css("border", "thick solid red");});$("#btn").click(function(e){ $("img").mouseenter(); e.preventDefault();}); |
document对象事件快捷方法
| 方法 | 描述 |
| load(function) | 即load事件，在页面中的子元素及资源文件载入完成时触发 |
| ready(function) | 在页面中的元素已经处理完成，DOM就绪触发 |
| unload(function) | 即unload事件，当用户离开当前页面时触发 |
浏览器事件快捷方法
| 方法 | 描述 |
| error(function) | 即error事件，在载入外部资源文件出错时触发(如载入图片出错) |
| resize(function) | 即resize事件，当浏览器窗口大小发生改变时触发 |
| scroll(function) | 即scroll事件，当用户拖动滚动条时触发 |
鼠标事件快捷方法
| 方法 | 描述 |
| click(function) | 即click事件，在用户单击鼠标按钮时触发 |
| dbclick(function) | 即dbclick事件，在用户双击鼠标按钮时触发 |
| focusin(function) | 即focusin事件，在元素得到焦点时触发 |
| focusout(function) | 即focusout事件，在元素失去焦点时触发 |
| hover(function) hover(function, function) |
在鼠标进入或离开元素时触发，若只指定一个事件处理函数，则鼠标进入或离开元素时都会触发该函数的执行 |
| mousedown(function) | 即mousedown事件，当在某元素上按下鼠标时触发 |
| mouseenter(function) | 即mouseenter事件，当鼠标进入某元素显示区域时触发 |
| mouseleave(function) | 即mouseleave事件，当鼠标离开某元素显示区域时触发 |
| mousemove(function) | 即mousemove事件，当鼠标在某元素显示区域内移动时触发 |
| mouseout(function) | 即mouseout事件，当鼠标离开某元素显示区域时触发 |
| mouseover(function) | 即mouseover事件，当鼠标进入某元素显示区域时触发 |
| mouseup(function) | 即mouseup事件，当鼠标释放鼠标按钮时触发 |
表单事件快捷方式
| 方法 | 描述 |
| blur(function) | 即blur事件，在元素失去焦点时触发 |
| change(function) | 即change事件，当元素的值发生变化时触发 |
| focus(function) | 即focus事件，在元素得到焦点时触发 |
| select(function) | 即select事件，在用户选中某个可选值时触发 |
| submit(function) | 即submit事件，当用户提交表单时触发 |
键盘事件快捷方式
| 方法 | 描述 |
| keydown(function) | 即keydown事件，当用户按下一个键后触发 |
| keypress(function) | 即keypress事件，当用户按下一个键并释放(弹起)后触发 |
| keyup(function) | 即keyup事件，当用户释放一个(被按下的)键时触发 |
