免费AI编程助手
JQuery学习笔记整理：事件处理
本章的主题是jQuery事件处理，如果你对事件处理不了解，可以看这篇文章《JavaScript学习笔记整理（10）：Event事件》。
bind(eventType,function)、bind(eventType,data,function) 为jQuery对象内每一个匹配元素添加一个事件处理函数，支持可选的data参数。
bind(eventType,boolean)
bind(map)
one(eventType,funciton)、one(eventType,data,function)
unbind()、unbind(eventType)、unbind(eventType,boolean)
unbind(Event)
$('.box').bind('click',function(event){})
$('.box').bind('click mousedown',funciton(){});
var handle = {
mousedown: function(){},
mouseup: function(){}
};
$('.box').bind(handle);
var obj = {name:'tg'};
$('.box').bind('click',obj,funciton(event){
console.log(event.data.name); // "tg"
});
$('.box').unbind('mousedown');
$('.box').bind('click',function(event){
$(this).unbind(event);
})
$('.box').one('click',function(){
alert(1);
});
on(events,selector,data,function)、on(map,selector,data) 为匹配元素绑定事件处理函数
off(events,selector,function)、off(map,selector) 撤销使用on方法绑定的事件处理函数
delegate(selector,eventType,function)、delegate(selector,eventType,data,function)、delegate(selector,map) 使用selector过滤jQuery对象内所有匹配元素，然后绑定事件处理函数
undelegate()、undelegate(selector,eventType) 撤销使用delegate方法绑定且匹配选择器与事件类型的事件处理函数
$('.box').on('click',function(event){});
$('.box').on('click mousedown',function(){});
$('.box').on('click',{color:'red'},function(event){});
$('.box').on('click','p',function(){}); // 为div.box中的所有p元素绑定click事件处理函数
<div class="box">
<p>123</p><p>34</p>
</div>
$('.box').on('click','p',function(){ alert(1); });
$('.box').append('<p>新添加</p>');
trigger(eventType) 触发绑定在jQuery对象内匹配元素的特定事件类型（由eventType决定）上的事件处理函数。
trigger(Event) 触发绑定在jQuery对象内匹配元素的特定事件（由Event事件决定）上的事件处理函数。
triggerHandler(eventType) 触发绑定在jQuery对象内第一个匹配元素上的事件处理函数，既不冒泡，也不实施事件的默认行为。
<div class="box">123</div>
<button>模拟点击</button>
$('.box').on('click',function(){
alert(1);
});
$('button').on('click',function(){
$('.box').trigger('click');
});
2、事件方法
jQuery提供了很多常用事件绑定事件处理函数。
2.1 document对象事件方法
load(function) 即load事件，在页面中的子元素及资源文件载入完成时触发
ready(function) 在页面中的元素已经处理完成，DOM就绪时触发
unload(function) 即unload事件，当用户离开当前页面时触发
2.2 浏览器事件方法
error(function) 即error事件，在载入外部资源文件出错时触发（如载入图片出错）
resize(function) 即resize事件，当浏览器窗口大小发生变化时触发
scroll(function) 即scroll事件，当用户拖动滚动条时触发
2.3 鼠标事件方法
click(function) 即click事件，在用户点击鼠标按钮时触发
dblclick(function) 即dblclick事件，在用户双击鼠标按钮时触发
focusin(function) 即focusin事件，在元素得到焦点时触发
focusout(function) 即focusout事件，在元素失去焦点时触发
hover(function)、hover(function,function) 即hover事件，在鼠标进入或离开元素时触发，若指定两个参数，进入时会触发第一个函数，离开时会触发第二个函数，否则都会触发第一个。
mousedown(function) 即mousedown事件，当在某元素上按下鼠标时触发
mouseenter(function) 即mouseenter事件，当鼠标进入某元素显示区域时触发
mouseleave(function) 即mouseleave事件，当鼠标离开某元素显示区域时触发
mousemove(function) 即mousemove事件，当鼠标在某元素显示区域内移动时触发
mouseout(function) 即mouseout事件，当鼠标离开某元素显示区域时触发
mouseover(function) 即mouseover事件，当鼠标进入某元素显示区域时触发
mouseup(function) 即mouseup事件，当按下后释放鼠标按钮时触发
mouseenter()与mouseover()、mouseleave() 与mouseup()的区别？
mouseenter()和mouseover()作用一样，但前者不支持冒泡，后者支持。
mouseleave()和mouseup()作用一样，但前者不支持冒泡，后者支持。
2.4 表单事件方法
blur(function) 即blur事件，在元素失去焦点时触发
change(function) 即change事件，在元素的值发生变化时触发
focus(function) 即focus事件，在元素获得焦点时触发
select(function) 即select事件，在用户选中某个可选框时触发
submit(function) 即submit事件，当用户提交表单时触发
2.5 键盘事件方法
keydown(function) 即keydown事件，当用户按下一个键后触发
keypress(function) 即keypress事件，当用户按下一个键并释放后触发
keyup(function) 即keyup事件，当用户释放一个键时触发
keypress事件会在按下键盘按键时触发。它与keydown事件类似，但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress)，keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键，请监听keydown事件。
3、jQuery Event对象的属性和方法
Event对象主要英语获取事件的相关信息。
currentTarget 返回正在处理（响应）该事件的元素
data 返回绑定事件时传递的data对象
isDefaultPrevented() 若已经调用过preventDefault()方法，返回true
isImmediatePropagationStopped() 若已经调用过stopImmediatePropation()方法，返回true
originalEvent 返回未经jQuery处理的原始DOM Event对象
pageX、pageY 返回相对于页面左上角的鼠标位置
preventDefault() 用来阻止当前事件的默认行为
relatedTarget 仅对鼠标事件有效，返回该鼠标事件有关的元素
result 返回处理该事件的最后一个事件处理函数的返回值
stopImmediatePropagation() 立即阻止调用当前事件的其他事件处理函数
stopPropagation() 阻止事件冒泡
target 返回触发事件的元素
timeStamp 返回事件发生的时间
type 返回事件类型
which 在键盘和鼠标事件中，返回用户按下的键或鼠标按钮
了解原生的JavaScript事件对理解jQuery事件很有帮助，可以看这篇文章《JavaScript学习笔记整理（10）：Event事件》。
更多建议：