Jquery李炎恢——16,17基础事件
2016-08-13 21:20
337 查看
学习要点:
1.绑定事件
2.简写事件
3.复合事件
javaScript有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jquery为开发者更有效率的编写事件行为,封装了大量有益的事件方法供我们使用。
一、绑定事件
在javaScript课程的学习中,我们掌握了很多使用的事件,常用的事件click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,change,select,submit,keydown,keypress,keyup,blur,focus,load,resize,scroll,error。那么,还有更多的事件可以参考手册中的事件部分。
jquery通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type,[date],fn),type表示一个或多个类型的事件的事件名字符串;[data]是可选的,作为event.data属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn表示绑定到指定元素的处理函数。
//使用点击事件
$("input").bind("click",function(){ //点击按钮后执行匿名函数
alert("点击");
});
//普通处理函数
$("input").bind("click",fn); //执行普通函数无需圆括号
function fn(){
alert("点击");
}
//可以同时绑定多个事件
$("input").bind("mouseout mouseover",function(){ //移入和移出分别执行一次
$("div").html(function(index,value){
return value+"1";
});
});
//通过对象的键值对绑定多个参数
$("input").bind({ //传递一个对象
"mouseout":function(){
//事件名的引号可以省略
alert("移出");
},
"mouseover":function(){
alert("移入");
}
});
//使用unbind删除绑定的事件
$("input").unbind();
//删除所有当前元素的事件
//使用unbind参数删除指定类型事件
$("input").unbind("click"); //删除当前元素的click事件
//使用unbind参数删除指定处理函数的事件
function fn1(){
alert("点击1");
}
function fn2(){
alert("点击2");
}
$("input").bind("click",fn1);
$("input").bind("click",fn2);
$("input").unbind("click",fn1); //只删除fn1处理函数的事件
二、简写事件
为了使开发者更加方便的绑定事件,jquery封装了常用的事件以便节约更多的代码。我们称它为简写事件。
click(fn):触发条件是鼠标,触发每一个匹配元素的click(单击)事件
dbclick(fn):触发条件是鼠标,触发每一个匹配元素的click(双击)事件
mousedown(fn):触发条件是鼠标,触发每一个匹配元素的mousedown(点击后)事件
mouseup(fn):触发条件是鼠标,触发每一个匹配元素的mouseup(点击弹起)事
mouseover(fn):触发条件是鼠标,触发每一个匹配元素的mouseover(鼠标移入)事件
mouseout(fn):触发条件是鼠标,触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn):触发条件是鼠标,触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn):触发条件是鼠标,触发每一个匹配元素的mouseenter(鼠标穿过)事件
mouseleave(fn):触发条件是鼠标,触发每一个匹配元素的mouseleave(鼠标穿出)事件
keydown(fn):触发条件是键盘,触发每一个匹配元素的keydown(键盘按下)事件
keyup(fn):触发条件是键盘,触发每一个匹配元素的keyup(键盘弹起)事件
keypress(fn):触发条件是键盘,触发每一个匹配元素的keypress(键盘按下)事件
unload(fn):触发条件是文档,当卸载本页面时绑定一个要执行的函数
resize(fn):触发条件是文档,触发每一个匹配元素的resize(文档改变大小)事件
scroll(fn):触发条件是文档,触发每一个匹配元素的scroll(滚动条拖动)事件
focus(fn):触发条件是表单,触发每一个匹配元素的focus(焦点激活)事件
blur(fn):触发条件是表单,触发每一个匹配元素的blur(焦点丢失)事件
focusin(fn):触发条件是表单,触发每一个匹配元素的focusin(焦点激活)事件
focusout(fn):触发条件是表单,触发每一个匹配元素的focusout(焦点丢失)事件
select(fn):触发条件是表单,触发每一个匹配元素的select(文本选定)事件
change(fn):触发条件是表单,触发每一个匹配元素的change(值改变)事件
submit(fn):触发条件是表单,触发每一个匹配元素的submit(表单提交)事件
注意:这里封装的大部分方法都比较好理解,我们没必要一一演示确认,重点看几个需要注意区分的简写方法
mouseover()和mouseout()表示鼠标移入和移出的时候触发,那么jquery还封装了另外一组:mouseenter()和mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?手册上的说明是:mouseenter()和mouseleave()这组穿过子元素不会触发,而mouseover()和mouseout()则会触发
//html页面设置
<div
style="width:200px;height:200px;background:green">
<p
style="width:100px;height:100px;background:red;"><p>
</div>
<strong></strong>
//mouseover移入
$("div").mouseover(function(){ //移入div会触发,移入p再触发
$("strong").html(function(index,value){
return value+"1";
}
});
//mouseenter穿过
$("div").mouseenter(function(){ //穿过div或p
$("strong").html(function(index,value){ //在这个区域只触发一次
return value+"1";
});
});
//mouseout移出
$("div").mouseout(function(){
//移出div会触发,移出p再触发
$("strong").html(function(index,value){
return value+"1";
});
});
//mouseleave穿出
$("div").mouseleave(function(){
//移出整个div区域触发一次
$("strong").html(function(index,value){
return value+"1";
});
});
keydown(),keyup()返回的是键码,而keypress()返回的是字符编码
$("input").keydown(function(e){
alert("e.keyCode");
//按下a返回65
});
$("input").keypress(function(e){
alert("e.charCode");
//按下a返回97
});
注意:e.keyCode和e.charCode在两种事件互换也会产生不同的效果,除了字符还要一些字符键的区别。更多详情可以了解JavaScript事件处理那章。
focus()和blur()分别表示光标激活和丢失,事件触发时机是当前元素。而focusin()和foucusout()也表示光标激活和丢失,但事件触发的时机可以是子元素。
//html部分
<div style="width:200px;height:200px;background:red;">
<input type="text" value=""/>
</div>
<strong></strong>
//focus光标激活
$("input").focus(function(){ //当前元素触发
$("strong").html("123");
});
$("div").focus(function(){ //绑定的是div元素,子类input触发
$("strong").html("123");
});
注意:blur()和focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可以是子元素触发。
三、复合事件
jquery提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等
ready(fn):当DOM加载完毕触发事件
hover([fn1,]fn2):当鼠标移入触发第一个fn1,移出触发fn2
toggle(fn1,fn2[,f3.....]):已废弃,当鼠标点击触发fn1,再点击触发fn2
//背景移入移出切换效果
$("div").hover(function(){
$(this).css("background","black"); //mouseenter效果
},function(){
$(this).css("background","red"); //mouseleave效果,可省
}
});
注意:.hover()方法是结合了.mouseenter()和mouseleave()方法,并非.mouseover()和mouseout()方法。
toggle()这个方法比较特殊,这个方法有两层含义,第一层含义就是已经被1.8版本废用、1.9版删除掉的用法,也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。既然废弃掉了,就不应该使用。被删除的原因是:以减少混乱和提高潜在的模块化程度。
但你又非常想用这个方法,并且不想自己编写类似的功能,可以下载jquery-migrate.js文件,来向下兼容已被删除掉的方法。
//背景点击切换效果(1.9版删除掉了)
$("div").toggle(function(){ //第一次点击切换
$(this).css("background","black");
},function(){ //第二次点击切换
$(this).css("background","blue");
},function(){ //第二次点击切换
$(this).css("background","red");
});
注意:由于官方已经删除掉这个方法,所以也不是推荐使用的,如果在不基于向下兼容的插件JS。我们可以自己实现这个功能。
var flag=1; //计数器
$("div").click(function(){
if(flag==1){ //第一次点击切换
$(this).css("background","black");
flag=2;
}else if(flag==2){ //第二次点击切换
$(this).css("background","blue");
flag=3;
}else if(flag==3){ //第二次点击切换
$(this).css("background","red");
flag=1;
}
});
1.绑定事件
2.简写事件
3.复合事件
javaScript有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jquery为开发者更有效率的编写事件行为,封装了大量有益的事件方法供我们使用。
一、绑定事件
在javaScript课程的学习中,我们掌握了很多使用的事件,常用的事件click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,change,select,submit,keydown,keypress,keyup,blur,focus,load,resize,scroll,error。那么,还有更多的事件可以参考手册中的事件部分。
jquery通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type,[date],fn),type表示一个或多个类型的事件的事件名字符串;[data]是可选的,作为event.data属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn表示绑定到指定元素的处理函数。
//使用点击事件
$("input").bind("click",function(){ //点击按钮后执行匿名函数
alert("点击");
});
//普通处理函数
$("input").bind("click",fn); //执行普通函数无需圆括号
function fn(){
alert("点击");
}
//可以同时绑定多个事件
$("input").bind("mouseout mouseover",function(){ //移入和移出分别执行一次
$("div").html(function(index,value){
return value+"1";
});
});
//通过对象的键值对绑定多个参数
$("input").bind({ //传递一个对象
"mouseout":function(){
//事件名的引号可以省略
alert("移出");
},
"mouseover":function(){
alert("移入");
}
});
//使用unbind删除绑定的事件
$("input").unbind();
//删除所有当前元素的事件
//使用unbind参数删除指定类型事件
$("input").unbind("click"); //删除当前元素的click事件
//使用unbind参数删除指定处理函数的事件
function fn1(){
alert("点击1");
}
function fn2(){
alert("点击2");
}
$("input").bind("click",fn1);
$("input").bind("click",fn2);
$("input").unbind("click",fn1); //只删除fn1处理函数的事件
二、简写事件
为了使开发者更加方便的绑定事件,jquery封装了常用的事件以便节约更多的代码。我们称它为简写事件。
click(fn):触发条件是鼠标,触发每一个匹配元素的click(单击)事件
dbclick(fn):触发条件是鼠标,触发每一个匹配元素的click(双击)事件
mousedown(fn):触发条件是鼠标,触发每一个匹配元素的mousedown(点击后)事件
mouseup(fn):触发条件是鼠标,触发每一个匹配元素的mouseup(点击弹起)事
mouseover(fn):触发条件是鼠标,触发每一个匹配元素的mouseover(鼠标移入)事件
mouseout(fn):触发条件是鼠标,触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn):触发条件是鼠标,触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn):触发条件是鼠标,触发每一个匹配元素的mouseenter(鼠标穿过)事件
mouseleave(fn):触发条件是鼠标,触发每一个匹配元素的mouseleave(鼠标穿出)事件
keydown(fn):触发条件是键盘,触发每一个匹配元素的keydown(键盘按下)事件
keyup(fn):触发条件是键盘,触发每一个匹配元素的keyup(键盘弹起)事件
keypress(fn):触发条件是键盘,触发每一个匹配元素的keypress(键盘按下)事件
unload(fn):触发条件是文档,当卸载本页面时绑定一个要执行的函数
resize(fn):触发条件是文档,触发每一个匹配元素的resize(文档改变大小)事件
scroll(fn):触发条件是文档,触发每一个匹配元素的scroll(滚动条拖动)事件
focus(fn):触发条件是表单,触发每一个匹配元素的focus(焦点激活)事件
blur(fn):触发条件是表单,触发每一个匹配元素的blur(焦点丢失)事件
focusin(fn):触发条件是表单,触发每一个匹配元素的focusin(焦点激活)事件
focusout(fn):触发条件是表单,触发每一个匹配元素的focusout(焦点丢失)事件
select(fn):触发条件是表单,触发每一个匹配元素的select(文本选定)事件
change(fn):触发条件是表单,触发每一个匹配元素的change(值改变)事件
submit(fn):触发条件是表单,触发每一个匹配元素的submit(表单提交)事件
注意:这里封装的大部分方法都比较好理解,我们没必要一一演示确认,重点看几个需要注意区分的简写方法
mouseover()和mouseout()表示鼠标移入和移出的时候触发,那么jquery还封装了另外一组:mouseenter()和mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?手册上的说明是:mouseenter()和mouseleave()这组穿过子元素不会触发,而mouseover()和mouseout()则会触发
//html页面设置
<div
style="width:200px;height:200px;background:green">
<p
style="width:100px;height:100px;background:red;"><p>
</div>
<strong></strong>
//mouseover移入
$("div").mouseover(function(){ //移入div会触发,移入p再触发
$("strong").html(function(index,value){
return value+"1";
}
});
//mouseenter穿过
$("div").mouseenter(function(){ //穿过div或p
$("strong").html(function(index,value){ //在这个区域只触发一次
return value+"1";
});
});
//mouseout移出
$("div").mouseout(function(){
//移出div会触发,移出p再触发
$("strong").html(function(index,value){
return value+"1";
});
});
//mouseleave穿出
$("div").mouseleave(function(){
//移出整个div区域触发一次
$("strong").html(function(index,value){
return value+"1";
});
});
keydown(),keyup()返回的是键码,而keypress()返回的是字符编码
$("input").keydown(function(e){
alert("e.keyCode");
//按下a返回65
});
$("input").keypress(function(e){
alert("e.charCode");
//按下a返回97
});
注意:e.keyCode和e.charCode在两种事件互换也会产生不同的效果,除了字符还要一些字符键的区别。更多详情可以了解JavaScript事件处理那章。
focus()和blur()分别表示光标激活和丢失,事件触发时机是当前元素。而focusin()和foucusout()也表示光标激活和丢失,但事件触发的时机可以是子元素。
//html部分
<div style="width:200px;height:200px;background:red;">
<input type="text" value=""/>
</div>
<strong></strong>
//focus光标激活
$("input").focus(function(){ //当前元素触发
$("strong").html("123");
});
$("div").focus(function(){ //绑定的是div元素,子类input触发
$("strong").html("123");
});
注意:blur()和focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可以是子元素触发。
三、复合事件
jquery提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等
ready(fn):当DOM加载完毕触发事件
hover([fn1,]fn2):当鼠标移入触发第一个fn1,移出触发fn2
toggle(fn1,fn2[,f3.....]):已废弃,当鼠标点击触发fn1,再点击触发fn2
//背景移入移出切换效果
$("div").hover(function(){
$(this).css("background","black"); //mouseenter效果
},function(){
$(this).css("background","red"); //mouseleave效果,可省
}
});
注意:.hover()方法是结合了.mouseenter()和mouseleave()方法,并非.mouseover()和mouseout()方法。
toggle()这个方法比较特殊,这个方法有两层含义,第一层含义就是已经被1.8版本废用、1.9版删除掉的用法,也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。既然废弃掉了,就不应该使用。被删除的原因是:以减少混乱和提高潜在的模块化程度。
但你又非常想用这个方法,并且不想自己编写类似的功能,可以下载jquery-migrate.js文件,来向下兼容已被删除掉的方法。
//背景点击切换效果(1.9版删除掉了)
$("div").toggle(function(){ //第一次点击切换
$(this).css("background","black");
},function(){ //第二次点击切换
$(this).css("background","blue");
},function(){ //第二次点击切换
$(this).css("background","red");
});
注意:由于官方已经删除掉这个方法,所以也不是推荐使用的,如果在不基于向下兼容的插件JS。我们可以自己实现这个功能。
var flag=1; //计数器
$("div").click(function(){
if(flag==1){ //第一次点击切换
$(this).css("background","black");
flag=2;
}else if(flag==2){ //第二次点击切换
$(this).css("background","blue");
flag=3;
}else if(flag==3){ //第二次点击切换
$(this).css("background","red");
flag=1;
}
});
相关文章推荐
- 李炎恢JQUERY笔记\第8章 基础事件
- Web基础:jQuery下篇:千变万化的事件
- jQuery基础教程之jquery事件
- 李炎恢jQuery笔记5基础DOM和CSS操作
- jQuery学习笔记7:基础事件
- jQuery基础系列(三)---事件介绍(3)---事件处理方法
- Jquery基础之事件操作
- JQuery 基础事件
- jquery 选择器和鼠标事件 基础知识
- JavaScript(16)jQuery 事件
- jQuery基础教程之如何注册以及触发自定义事件
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
- 【练习向】jQuery基础教程第四版课后练习——Book03_jQuery_事件
- jQuery基础系列(二)---事件介绍(1)
- 【译】jquery基础教程(jquery fundamentals)——(第五部分)Jquery事件
- JQuery基础之(六)JQuery事件与事件对象
- jquery学习手记(9)事件基础知识
- 李炎恢JQUERY\第10章 高级事件
- jQuery 学习笔记 事件基础