事件名 |
说明 |
语法 (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>