事件
事件驱动：当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素，即可触发
常用事件：
绑定事件
通过bind()方法为元素绑定事件，可传递三个参数band(type,[data],fn)，type表示一个或多个类型的事件名字符串，多个事件用空格隔开；data作为event.data属性值传递一个额外的数据；fn表示绑定到指定元素的函数
bind({type1:fn1,type2:fn2,...}：将事件和元素绑定
删除事件
unbind()：删除所有事件
unbind(type)：删除指定事件
unbind(type,fn)：删除指定事件的绑定函数
简写事件
click(fn)：单击事件
dbclick(fn)：双击事件
mousedown(fn)：鼠标左键按下事件
mouseup(fn)：鼠标左键弹起事件
$(window).onload(fn)：页面卸载事件
$(window).resize(fn)：文档改变大小事件
$(window).scroll(fn)：滚动条改变事件
select(fn)：文本选定事件
change(fn)：文本改变事件
submit(fn)：表单提交事件，作用对象是form
mouseover(fn)：当鼠标指针位于元素上方时，触发
mouseout(fn)：当鼠标指针离开元素上方时，触发
mouseenter(fn)：当指针进入元素时，触发
mouseleave(fn)：当指针移出元素时，触发
keydown(fn)：键盘按键按下事件，返回键码
keyup(fn)：键盘按键弹起事件，返回键码
keypress(fn)：键盘按键按下事件，返回字符编码
focus(fn)：得到焦点事件，必须作用在当前元素
blur(fn)：失去焦点事件，必须作用在当前元素
focusin(fn)：得到焦点事件，可作用子元素
foucsout(fn)：失去焦点事件，可作用子元素
复合事件
ready(fn)：当DOM加载完毕触发事件
hover(fn1,fn2)：结合mouseenter和mouseleave事件
事件对象：event对象，通过处理函数默认传递接受
事件对象属性
| 属性名称 | 描述 | 举例 |
type |
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. | $("a").click(function(event) {
alert(event.type);
}); |
target |
获取事件触发元素DOM对象 | $("a[href=http://google.com]").click(function(event) {
alert(event.target.href);
}); |
data |
事件调用时传入额外参数. | $("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
}); |
relatedTarget |
对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 | $("a").mouseout(function(event) {
alert(event.relatedTarget);
}); |
currentTarget |
冒泡前的当前触发事件的DOM对象, 等同于this. | $("p").click(function(event) {
alert( event.currentTarget.nodeName );
}); 结果:P |
pageX/Y |
鼠标事件中, 事件相对于页面原点的水平/垂直坐标. | $("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );
}); |
screenX/screenY |
获取显示器屏幕位置的水平/垂直坐标(非jQuery) | $("a").click(function(event) {
alert("Current mouse position: " + event.screenX + ", " + event.screenY );
}); |
clientX/clientY |
获取相对于页面视口 的水平/垂直坐标(非Jquery) | $("a").click(function(event) {
alert("Current mouse position: " + event.clientX + ", " + event.clientY );
}); |
result |
上一个事件处理函数返回的值 | $("p").click(function(event) {
return "hey"
});
$("p").click(function(event) {
alert( event.result );
}); 结果:”hey” |
timeStamp |
事件发生时的时间戳. | var last;
$("p").click(function(event) {
if( last )
alert( "time since last event " + event.timeStamp - last );
last = event.timeStamp;
});
|
| which | 获取鼠标的左中右键（1,2,3），或键盘的按键 | $('input').bind('mousedown',function(e){ alert(e.which); }); |
| altKey/shiftKey/ctrlKey/metaKey | 获取是否按下了alt、shift、ctrl或meta键 | $('input').bind('click',function(e){ alert(e.ctrlKey); }); |
冒泡行为：如果在页面中重叠多个元素，并且重叠的这些元素都绑定到同一个事件，就会出项冒泡问题
阻止冒泡：在函数中使用stopPropagation()方法，可阻止冒泡
默认行为：页面中的元素存在着许多默认行为，如右键document会出现菜单，点击超链接会打开新页面等等
阻止默认行为：在函数中使用preventDefault()方法，可阻止默认行为
阻止默认行为和冒泡：return false;
isDefalutPrevented()：判断是否调用了PreventDefault()方法
isPropagationStopped()：判断是否调用了stopPropagation方法
stopImmediatePropagation()：取消冒泡行为，并且取消该事件的后续事件处理函数
isImmediatePropagationStopped()：判断是否调用了stopImmediatePropagation方法
高级事件：
模拟操作:模拟用户行为的操作
trigger(operation)：模拟用户的operation操作
trigger(operation,[data1,data2,...])：data表示传递的数据，数据只有一个时，中括号可省略
triggerHandle(operation)：模拟用户行为，但不执行默认行为
trigger和triggerHandle区别
trigger会执行默认行为，triggerHandle不执行默认行为
trigger会匹配所有元素，triggerHandle只返回第一个元素
trigger返回JQuery对象，可使用连缀，triggerHandle()返回return值或undefined
trigger会冒泡，triggerHandle不会冒泡
命名空间
在操作后面加上".***"，可精确命名事件，方便调用
事件委托：通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素，然后再进行处理
方法：live()，默认绑定document元素，不推荐使用，JQ1.4.3以后废用
作用：1、绑定的是父元素， 只会绑定一次事件，不会导致重复
2、可动态绑定事件
delegate()：live的替代方法，语义清晰
object.delegate(element,operation,function)：object为绑定父元素对象，element为绑定的子元素，operation为对绑定元素的操作，function为调用的方法
on、off、one：JQ1.7以后使用
on：绑定方法
on(operation[ operation2...],fn)：operation绑定元素触发事件，可绑定多个;fn触发函数
on(operation[ operation2...],data,fn)：data传递额外的数据
on({operation1:fn1,operation2:fn2,...})：多元素触发事件相应的函数
on(operation,false)：阻止默认行为和冒泡行为
on(operation,element,fn)：事件委托，element表示绑定的子元素
off：解绑方法
off(operation)：移除某一元素的操作
off(operation,fn)：移除某一元素的函数
off(operation,element,fn)：解绑事件委托，element表示绑定的子元素
one：只触发一次
one(operation,fn)：仅一次事件触发
one(operation,element,fn)：绑定的父元素也只触发一次