jQuery 事件
事件
1.页面载入
1.1 ready(fn)
$(document).ready(function(){})
$(function(){})
2.事件处理
2.1 on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
var data={id:5,name:"呜呜"};
function myFunc(event){
alert(event.data.id);
}
$("p").on("click mouseover","span",data,myFunc);
//
var data={id:5,name:"呜呜"};
var events={
"click":function(event){$(this).text(event.data.id)},
"mouseover":function(event){$(this).text(event.data.name);}
};
$("p").on(events,"span",data);
2.2 off(events,[selector],[fn]) 移除元素上绑定的一个或多个事件的事件处理函数。主要用于解除由on()函数绑定的事件处理函数。
$("p").off("click mouseover","span",data,myFunc);
2.3 bind(type,[data],fn) 为每个匹配元素的一个或多个事件绑定事件处理函数
$("p").bind("click",function(){alert($(this).text());})
$("p").bind("click",{foo:"bar"},myFunc);
function myFunc(event) {
alert(event.data.foo)
}
$("p").bind({
click:function(){},
mouseover:function(){}
})
jQuery事件绑定on()、bind()与delegate() 方法详解 http://www.jb51.net/article/67166.htm
2.4 unbind(type,[data|fn]) 移除匹配元素上绑定的一个或多个事件的事件处理函数。主要用于解除由bind()函数绑定的事件处理函数。
$("p").unbind("click",{foo:"bar"},myFunc);
2.5 one(type,[data],fn) 为每个匹配元素的一个或多个事件绑定一次性事件处理函数。
$("p").one("click",function(){})
2.6 trigger(type,[data]) 在每个匹配元素上触发指定类型的事件。
$("p").trigger("click");
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
2.7 triggerHandler(type, [data]) 在每个匹配元素上触发指定类型的事件
该函数的作用于trigger()函数相似，但triggerHandler()函数具有以下例外情况：
triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)。
triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。
triggerHandler()触发的事件不会在DOM树中冒泡，因此事件不会冒泡传递到它的任何祖辈元素。
triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身
3.事件委派
3.1 delegate(sel,[type],[data],fn) 为指定元素的一个或多个事件绑定事件处理函数。
执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。
$("p").delegate("p","click",function(event){alert($(this).text())})
3.2 undelegate([sel,[type],fn]) 用于移除元素上绑定的一个或多个事件的事件处理函数,主要用于解除由delegate()函数绑定的事件处理函数。
$("p").undelegate("p","click",function(event){alert($(this).text())})
4.事件切换
4.1 hover([over,]out) 为每个匹配元素的hover事件绑定处理函数
$("p").hover(function(){$(this).text("移入")},function(){$(this).text("移出")})；
4.2 toggle([speed],[easing],[fn]) 为每个匹配元素的click事件绑定轮流的处理函数
$("p").toggle();
$("p").toggle(
function(){$(this).text("点击第一次执行")},
function(){$(this).text("点击第二次执行")},
function(){$(this).text("点击第三次执行")}
);
5.事件
5.1 focus([[data],fn]) 为每个匹配元素的focus事件绑定处理函数
$(":text").focus(); //获得焦点
$(":text").focus(function(){$(this).css("border","1px solid #f00");})
//
var data={"name":"呜呜","age":"年龄"};
$(":text").focus(data,function(event){
var d=event.data;
$(this).next().html('请输入['+d[this.name]+']');
});
5.2 blur([[data],fn]) 为每个匹配元素的blur事件绑定处理函数
$("p").blur();//触发所有段落的blur事件
$("p").blur(function(){$(this).text("blur")})
//
var data={"name":"姓名","age":"年龄"};
$(":text").blur(data,function(event){
var d=event.data;
var me=$(this);
var tips='';
if(me.val()){
tips='<span style="color:red">['+d[this.name]+']不能为空</span>';
}
$(this).next().html(tips);
});
5.3 focusin([[data],fn]) 为每个匹配元素的focusin事件绑定处理函数,与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况(换句话说，focusin事件支持冒泡)。
$("p").focusin(function(){
$(this).css("","")
});
var inputMap = { "name": "姓名", "age": "年龄" };
//为所有text元素的focusin事件绑定处理函数
$("p").focusin( inputMap, function(event){
var map = event.data;
var inputName = $(this).children(":text:focus").attr("name");
$("#msg").html( '请输入[' + map[inputName] + ']' );
} );
5.4 focusout([[data],fn])为每个匹配元素的focusout事件绑定处理函数,与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况(换句话说，focusout事件支持冒泡，blur不支持)。
var inputMap = { "name": "姓名", "age": "年龄" };
// 为所有p元素的focusout事件绑定处理函数
// 文本框失去焦点时，进行表单验证，并显示相应的提示信息
$("p").focusout( inputMap, function(event){
var map = event.data;
var $focusText = $(this).children(":text");
var inputName = $focusText.attr("name");
var tips = '';
if( !$focusText.val() ){
tips = '[' + map[inputName] + ']不能为空!';
}
$("#msg").html( tips );
} );
5.5 change([[data],fn]) 为每个匹配元素的change事件绑定处理函数。仅适用于text,textarea,select.
$(":text").change(myFunc);
function myFunc(event){
$("label[for='"+this.name+"']").html(this.value);
}
//
var data={name:'姓名',age:'年龄',sex:'性别'};
function myFunc(event){
var d=event.data;
$("p").append(new Date().toLocaleString()+'['+d[this.name]+ ']发生了更改<br>');
}
$(":text").change(data,myfunc)
5.6 select([[data],fn]) 为每个匹配元素的select事件绑定处理函数,select事件会在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框。
$(":text").select(function(){$(this).css("","");})
//
var user={name:'smm',age:'12'};
$(":text").select(data,function(event){
$("p").html(event.data.name + "，你选择了[" + this.name + "]中的一些文本内容!" ).show().fadeOut( 2000 );
});
5.7 submit([[data],fn]) 为每个匹配元素的submit事件绑定处理函数。
$("form").submit(function(event){
if(!$("#name").val()){
alert(""姓名不能为空);
return false;
}else if(!$("#age").val()){
alert("年龄不能为空");
return false;
}
})
//
var data={name:'姓名',age:'年龄'};
$("form").submit(data,function(event){
var d=event.data;
var label='';
$(this).find(":text").each(function(){
if(!this.value){
label=d[this.name];
return false;
}
});
if(label){
alert(label+'不能为空');
return false;
}
});
5.8 keydown([[data],fn]) 为每个匹配元素的keydown事件绑定处理函数。keydown事件会在按下键盘按键时触发
$(window).keydown(function(event){
$("body").append("<br>你按下的按键的代码值为:["+event.which+']');
});
var num={start:65,end:90};
$(":text").keydown(num,function(event){
var keys=event.data;
return event.which >= key.start && event.which <= keys.end;
});
5.9 keypress([[data],fn]) 为每个匹配元素的keypress事件绑定处理函数,
$(window).keypress( function(event){
$("body").append( "<br>你输入了字符[" + String.fromCharCode( event.which ) + "](event.which=" + event.which + ')' ) ;
} );
//
// { A:65, Z:90, a:97, z:122 }
var validChars = { "A": "A".charCodeAt(0), "Z": "Z".charCodeAt(0), "a": "a".charCodeAt(0), "z": "z".charCodeAt(0) };
// 只允许输入大小写字母，不允许输入其他字符(使用某些输入法可能会绕过该限制，从而输入中文或其它字符)
$("#chars").keypress( validChars, function(event){
var ch = event.data;
return event.which >= ch.A && event.which <= ch.Z || event.which >= ch.a && event.which <= ch.z;
} );
5.10 keyup([[data],fn]) 为每个匹配元素的keyup事件绑定处理函数,keyup事件会在按下键盘按键并释放时触发
$(window).keyup( function(event){
$("body").append( "<br>你按下并释放的按键的代码值为:[" + event.which + ']' ) ;
} );
//
var template = "你按了count个按键!";
// 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制)
$("#keys").keyup( template, function(event){
var $me = $(this);
var count = $me.data("count") || 0;
$me.data("count", ++count);
$("#counter").html( event.data.replace("count", count) );
} );
5.11 click([[data],fn]) 为每个匹配元素的click事件绑定处理函数
$(":button").click( function(event){
alert( this.value + "-1" );
} );
5.12 dbclick([[data],fn]) 为每个匹配元素的dblclick事件绑定处理函数
var user = { name: 'CodePlayer', age: 18 };
// 为所有button元素的dblclick事件绑定处理函数
$(":button").dblclick( user, function(event){
alert( event.data.name ); // CodePlayer
} );
5.13 mouseenter([[data],fn]) 为每个匹配元素的mouseenter事件绑定处理函数,mouseenter事件会在鼠标进入某个元素时触发
var cssStyle = { background: "#eee", color: "blue" };
//鼠标移入div元素就设置指定的css样式
$("div").mouseenter( cssStyle, function(event){
var style = event.data;
$(this).css( style );
} );
5.14 mouseleave([[data],fn]) 为每个匹配元素的mouseleave事件绑定处理函数,mouseleave事件会在鼠标离开某个元素时触发
$("div").mouseleave(function(){
$(this).css( "color", "purple" );
});
5.15 mouseover([[data],fn]) 为每个匹配元素的mouseover事件绑定处理函数,mouseover事件会在鼠标进入某个元素时触发。它与mouseenter事件相似，但mouseenter事件只会在鼠标进入当前元素时触发，而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发
$("div").mouseover(function(){
$(this).css( "background", "#eee" );
});
5.16 mouseout([[data],fn]) 为每个匹配元素的mouseout事件绑定处理函数。mouseout事件会在鼠标离开某个元素时触发。
$("div").mouseout(function(){
$(this).css( "color", "purple" );
});
5.17 mousedown([[data],fn]) 为每个匹配元素的mousedown事件绑定处理函数,mousedown事件会在鼠标按钮被按下时触发。
// 分别记录每个p元素的mousedown事件的触发次数
$("p").mousedown(function(){
var $me = $(this);
var count = $me.data("count") || 0;
$me.data("count", ++count );
$me.html( '点击此处' + count + '次' );
});
//
// event.which属性值：1表示鼠标左键，2表示鼠标中键(滚轮键)，3表示鼠标右键。
var buttonMap = { "1": "左", "2": "中", "3": "右" };
//记录触发div元素的mouseleave事件的次数
$(window).mousedown(buttonMap, function(event){
var map = event.data;
$("#log").prepend( '你按下了鼠标[' + map[event.which] + ']键<br>');
});
5.18 mouseup([[data],fn]) 为每个匹配元素的mouseup事件绑定处理函数,mouseup事件会在鼠标按钮被释放时触发
// event.which属性值：1表示鼠标左键，2表示鼠标中键(滚轮键)，3表示鼠标右键。
var buttonMap = { "1": "左", "2": "中", "3": "右" };
//记录触发div元素的mouseleave事件的次数
$(window).mouseup(buttonMap, function(event){
var map = event.data;
$("#log").prepend( '你按下并松开了鼠标[' + map[event.which] + ']键<br>');
});
5.19 load([[data],fn]) 为每个匹配元素的load事件绑定处理函数,load事件会在资源加载完成时触发
$("img").load( function(){
alert( "图片[" + this.alt + "]加载完毕!" );
} );
5.20 unload([[data],fn]) 每个匹配元素的unload事件绑定处理函数,unload事件会在页面退出时触发
$(window).unload( function(){
alert("离开当前文档!");
} );
5.21 error([[data],fn]) 为每个匹配元素的error事件绑定处理函数 ,error事件会在js发生错误或资源加载失败时触发
$("img").error( function(){
alert( "图片加载失败!" );
} );
var newImageURL = "http://www.365mini.com/static/image/backTop.png";
// 图片加载失败时，重新加载新的图片URL
$("img").error( newImageURL, function(event){
this.src = event.data;
} );
5.22 resize([[data],fn]) resize事件会在元素的尺寸大小被调整时触发
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);
}
} );
5.23 scroll([[data],fn]) scroll事件会在元素的滚动条位置发生改变时触发
$(window).scroll( function(event){
$("#msg").append( $(this).scrollTop() + '<br>' );
} );
//
var maxScrollTop = 1000;
// 向下滚动到据顶部超过1000px时，回到顶部
$(window).scroll( maxScrollTop, function(event){
var $me = $(this);
if( $me.scrollTop() > event.data ){
$me.scrollTop( 0 );
}
});
