jquery事件之事件

标签：

jQueryObject.blur( [ [ data ,]  handler ] )

jQueryObject.change( [ [ data ,]  handler ] )

jQueryObject.click( [ [ data ,]  handler ] )

jQueryObject.dblclick( [ [ data ,]  handler ] )

jQueryObject.error( [ data ,]  handler )

jQueryObject.focus( [ [ data ,]  handler ] )

jQueryObject.focusin( [ [ data ,]  handler ] )

jQueryObject.focusout( [ [ data ,]  handler ] )

jQueryObject.keydown( [[ data ,]  handler ] )

jQueryObject.mousedown( [[ data ,]  handler ] )

jQueryObject.mouseup( [ [ data ,]  handler ] )

jQueryObject.mouseenter( [[ data ,]  handler ] )

jQueryObject.resize( [ [ data ,]  handler ] )

jQueryObject.scroll( [ [ data ,]  handler ] )

jQueryObject.select( [ [ data ,]  handler ] )

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>

jquery事件之事件

标签：

原文地址：http://www.cnblogs.com/qinyi173/p/4957715.html