jquery事件之事件

事件名	说明	语法 （events 事件类型，data数据，handler 事件处理函数，selector 选择器）
blur()	获得失去鼠标光标焦点事件	jQueryObject.blur( [ [ data ,]  handler ] )
change()	在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>	jQueryObject.change( [ [ data ,]  handler ] )
click（）	事件就是鼠标按钮单击事件	jQueryObject.click( [ [ data ,]  handler ] )
dblclick（）	鼠标左键双击事件。	jQueryObject.dblclick( [ [ data ,]  handler ] )
error()	在js发生错误或资源加载失败时触发。该事件主要用于window对象、<img>等元素。	jQueryObject.error( [ data ,]  handler )
focus（）	获得鼠标光标焦点事件，（与blur()相反）	jQueryObject.focus( [ [ data ,]  handler ] )
focusin（）	获得焦点事件。与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况	jQueryObject.focusin( [ [ data ,]  handler ] )
focusout（）	失去焦点事件。与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况	jQueryObject.focusout( [ [ data ,]  handler ] )
keydown（）	会在按下键盘按键时触发。它与keypress事件类似，但keypress着重的是按下该键输入了哪个字符，按下任何键都可触发keydown)。	jQueryObject.keydown( [[ data ,]  handler ] )
keypress（）	按下键盘按键时触发。它与keydown事件类似，但keypress着重的是按下该键输入了哪个字符	jQueryObject.keypress( [[ data ,]  handler ] )
keyup（）	按下键盘按键并释放时触发	jQueryObject.keyup( [[ data ,]  handler ] )
mousedown（）	在鼠标按钮被按下时触发。（无需释放）	jQueryObject.mousedown( [[ data ,]  handler ] )
mouseup（）	在鼠标按钮被释放时触发。	jQueryObject.mouseup( [ [ data ,]  handler ] )
mouseenter（）	在鼠标进入某个元素时触发。只会在鼠标进入当前元素时触发	jQueryObject.mouseenter( [[ data ,]  handler ] )
mouseleave（）	在鼠标离开某个元素时触发，只会在鼠标离开当前元素时触发	jQueryObject.mouseleave( [[ data ,]  handler ] )
mouseover（）	在鼠标进入某个元素时触发，鼠标进入当前元素及其任何后代元素时触发	jQueryObject.mouseover( [[ data ,]  handler ] )
mouseout（）	鼠标离开某个元素时触发，鼠标离开当前元素及其任何后代元素时触发	jQueryObject.mouseout( [[ data ,]  handler ] )
load（）	在资源加载完成时触发。从1.8开始被标记为已过时	jQueryObject.load( [[ data ,]  handler ] )
resize（）	会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。	jQueryObject.resize( [ [ data ,]  handler ] )
scroll（）	在元素的滚动条位置发生改变时触发。该事件一般仅适用于window对象或其他可滚动元素(一般会出现滚动条)。	jQueryObject.scroll( [ [ data ,]  handler ] )
select（）	在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框	jQueryObject.select( [ [ data ,]  handler ] )
submit（）	事件会在表单被提交时触发。该事件仅适用于<form>元素。	jQueryObject.submit( [ [ data ,]  handler ] )

1.blur()事件就是获得失去鼠标光标焦点事件。
$("#txt1").blur(function(){
$(this).css("border"," 1px solid red");
});
判断文本框验证：
var data={"name":"eric","sex":"man"};
$("#t1").blur(data,function(event){
var map=event.data;
var tips="";
if(!$(this).val()){
$(this).next(".tips").html("").append("<b style='color:red;'>请输入"+map.name+"</b>");
return false;
}
if($(this).val!="eric"){
$(this).next(".tips").html("").append("<b style='color:red;'>输入有误,名字不是"+map.name+"</b >");
return false;
}
});
2.change()函数用于为每个匹配元素的change事件绑定处理函数。change事件会在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>。对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。
文本框值发生变化就记录时间并判断输入的值是否已经存在：
var data={"name":"eric","sex":"man"};
function changeHandle(event){
var map=event.data;
$("#log").append(new Date().toLocaleString()+","+map.name+" 发生了改变<br>");
if($("#txt1").val()==map.name){
$("#log").append(new Date().toLocaleString()+","+map.name+" 已经存在 <br>");
}
}
$("#txt1").change(data,changeHandle);
3.click事件就是鼠标按钮单击事件。
4.dblclick事件就是鼠标左键双击事件。
var data={"name":"eric","sex":"man"};
$("#btn").dblclick(data,function(event){
alert(event.data.name);
});
5.error()函数用于为每个匹配元素的error事件绑定处理函数。会在js发生错误或资源加载失败时触发。该事件主要用于window对象、<img>等元素。删除通过error()绑定的事件，使用unbind()函数。
$("img").error( function(){
alert( "图片加载失败!" );
} );
// 图片加载失败时，重新加载新的图片URL
var newImageURL = "http://www.365mini.com/static/image/backTop.png";
$("img").error( newImageURL, function(event){
this.src = event.data;
} );
6.focus事件就是获得鼠标光标焦点事件，要删除通过focus()绑定的事件，请使用unbind()函数。（与blur()相反）
$("#t2").focus(function(event){
$(this).css("border","1px solid red");
});
// 为所有text元素的focus事件绑定处理函数
var inputMap = { "name": "姓名", "age": "年龄" };
$(":text").focus( inputMap, function(event){
var map = event.data;
$(this).next(".tips").html( '请输入[' + map[this.name] + ']' );
} );
7.focusin事件就是获得焦点事件。与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况(换句话说，focusin事件支持冒泡)。
8.focusout事件就是失去焦点事件。与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况(换句话说，focusout事件支持冒泡，blur不支持)。
9.keydown事件会在按下键盘按键时触发。它与keypress事件类似，但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress)，keydown着重的是按下了哪个键(按下任何键都可触发keydown)。删除通过keydown()绑定的事件，使用unbind()函数。
$("#t2").keydown(function(event){
$(this).css("border","1px solid red");
});
// 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制)
var validKeys = { start: 65, end: 90 };
$("#keys").keydown( validKeys, function(event){
var keys = event.data;
return event.which >= keys.start && event.which <= keys.end;
} );
10.keypress事件会在按下键盘按键时触发。它与keydown事件类似，但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress)，keydown着重的是按下了哪个键(按下任何键都可触发keydown)。
11.keyup事件会在按下键盘按键并释放时触发。例如：你一直按住A键，直到10秒钟后才释放，只会在释放按键的时候触发一次keyup事件。但在这个过程中会触发许多次keydown事件(或keypress事件)。因此，keyup事件无法阻止字符的输入。
$("#t2").keyup(function(event){
$(this).css("border","1px solid red");
});
12.mousedown事件会在鼠标按钮被按下时触发。mouseup事件会在按下鼠标按钮并释放时触发。注意：如果一直按住鼠标按钮不放，也只会触发一次mousedown事件。
$("#t2").mousedown(function(event){
$(this).css("border","1px solid red");
});
13.mouseup事件会在鼠标按钮被释放时触发。mousedown事件会在鼠标按钮被按下(无需释放)时触发。
$("#t2").mouseup(function(event){
$(this).css("border","1px solid red");
});
14.mouseenter事件会在鼠标进入某个元素时触发。它与mouseover事件相似，但mouseenter事件只会在鼠标进入当前元素时触发，而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说，mouseover事件支持冒泡)。
$("#t2").mouseenter(function(event){
$(this).css("border","1px solid red");
});
15.mouseleave事件会在鼠标离开某个元素时触发。它与mouseout事件相似，但mouseleave事件只会在鼠标离开当前元素时触发，而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说，mouseout事件支持冒泡)。
$("#t2").mouseleave(function(event){
$(this).css("border","1px solid red");
});
16.mouseover事件会在鼠标进入某个元素时触发。它与mouseenter事件相似，但mouseenter事件只会在鼠标进入当前元素时触发，而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说，mouseover事件支持冒泡)。
17.mouseout事件会在鼠标离开某个元素时触发。它与mouseleave事件相似，但mouseleave事件只会在鼠标离开当前元素时触发，而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说，mouseout事件支持冒泡)。
18.load事件会在资源加载完成时触发。该事件主要用于window对象、document对象、<body>、<script>、<link>、<img>、<iframe>、<frameset>、<frame>等元素。jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
19.unload事件会在页面退出时触发。该事件主要用于window对象、<body>、<frameset>元素。从1.8开始被标记为已过时。
20.resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。
var minSize = { width: 800, height: 600 };
$(window).resize( minSize, function(event){
var min = event.data;
var $dom = $(this);
if( $dom.width() < min.width ){
$("body").append("<br>窗口宽度不要小于" + min.width );
}else if( $dom.height() < min.height ){
$("body").append("<br>窗口高度不要小于" + min.height);
}
} );
21.scroll事件会在元素的滚动条位置发生改变时触发。该事件一般仅适用于window对象或其他可滚动元素(一般会出现滚动条)。
// 向下滚动到据顶部超过1000px时，回到顶部：
var maxScrollTop = 1000;
$(window).scroll( maxScrollTop, function(event){
var $me = $(this);
if( $me.scrollTop() > event.data ){
$me.scrollTop( 0 );
}
} );
22.select事件会在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框。
// 为所有text元素的select事件绑定处理函数
var user = { name: 'CodePlayer', age: 18 };
$(":text").select( user, function(event){
$("#msg").html( event.data.name + "，你选择了[" + this.name + "]中的一些文本内容!" ).show().fadeOut( 2000 );
} );
23.submit事件会在表单被提交时触发。该事件仅适用于<form>元素。
// 触发form元素的submit事件
// $("form").submit( );
还可以为事件处理函数传递一些附加的数据:
var map = { name: "姓名", age: "年龄" };
$("form").submit( map, function(event){
var labelMap = event.data;
var label = '';

// 循环验证所有text元素是否为空
$(this).find(":text").each(function(){
if( !this.value ){
label = labelMap[this.name];
return false;
}
});

if( label ){
alert( label + "不能为空!" );
return false;
}
} );

html页面：

<body>
<form>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
<input id="txt1" type="text"/>
</div>
<div id="log"><div>
<input id="t1" name="name" type="text" /><span class="tips"></span>
<br>
<input id="t2" name="age" type="text" /><span class="tips"></span>
<img src="http://www.365mini.com/static/image/invalid.png" alt="回到顶部" />
</form>
</body>