jQuery -- 事件
2016-11-16 18:49
267 查看
事件指的是页面对操作者动作的响应。例如鼠标的滑过、点击等都属于动作。
jQuery中常用的事件大体分为鼠标事件、键盘事件、表单事件以及窗口事件这4种,可以说这些类型的事件满足了大部份的需求。
单击与双击
其它的几个鼠标事件应用较少,不再赘述,有兴趣的可以去研究一下。
注意一点:mouseover与mouseenter的区别,mouseover在进入被选元素或任意子元素时都会被触发,而mouseenter只有在进行被选元素时才会触发,所以mouseover可能会触发多次(父子元素之间的over/out),而mouseenter只会触发1次。
focus和blur是一对获取/失去焦点的事件,如下所示:
submit分为两种,分别是:submit()和submit(function)。用户在提交表单时,可以使用submit()直接提交,也可以使用submit(function)来进行提交,插入一些在提交时想要做的事情。
submit仅适用于表单form。
示例使用的是submit(function),在提交的时候输出要提交的数据。
当窗口的尺寸发生改变时,修改div元素的背景色为绿色:
hover:用来指定元素的两个事件,分别是鼠标滑入元素、鼠标滑出元素。需要注意的是,在jQuery 1.7版本前,该方法触发的是mouseenter和mouseleave事件;而在jQuery 1.8版本后,该方法触发的是mouseover和mouseout事件。
event:event应该算是一个对象,它有许多的属性,可以使用它来获取当前的DOM元素、鼠标位置、事件的值等信息。
change:当元素的值发生改变时触发的事件。
jQuery中常用的事件大体分为鼠标事件、键盘事件、表单事件以及窗口事件这4种,可以说这些类型的事件满足了大部份的需求。
基本事件
jQuery中最基本的事件就是页面完全加载时的ready事件了,这基本上是所有函数的起始。$("document").ready(function) ---------- $("document").ready(function(){ });
鼠标事件
鼠标事件应该算是应用最频繁的事件了,包括鼠标的单击click、双击dblclick、按下mousedown、松开mouseup、鼠标位置mousemove、鼠标滑入mouseover、鼠标滑出mouseout以及和鼠标滑入/滑出相似的mouseenter与mouseleave。单击与双击
$(document).ready(function(){ $("#ti1").click(function(){ //鼠标单击事件 $(this).html("<h3>Click</h3>"); }); $("#ti2").dblclick(function(){ //鼠标双击事件 $(this).html("<h3>Double Click</h3>"); }); $(".tc1").mousedown(function(){ //鼠标按下事件 $(this).html("<h3>MouseDown</h3>"); }); $(".tc1").mouseup(function(){ //鼠标松开(弹起)事件 $(this).html("<h3>MouseUp</h3>"); }); });
其它的几个鼠标事件应用较少,不再赘述,有兴趣的可以去研究一下。
注意一点:mouseover与mouseenter的区别,mouseover在进入被选元素或任意子元素时都会被触发,而mouseenter只有在进行被选元素时才会触发,所以mouseover可能会触发多次(父子元素之间的over/out),而mouseenter只会触发1次。
focus和blur是一对获取/失去焦点的事件,如下所示:
$("input").focus(function(){ $(this).css("background-color","red"); }); $("input").blur(function(){ $(this).css("background-color","white"); })
表单事件
表单事件应用最多的是submit提交,即表单提交,在许多需要用户注册、填写提交信息的地方都存在表单提交。submit分为两种,分别是:submit()和submit(function)。用户在提交表单时,可以使用submit()直接提交,也可以使用submit(function)来进行提交,插入一些在提交时想要做的事情。
submit仅适用于表单form。
$(document).ready(function(){ $("form").submit(function(){ var n = $("#i_uname").val(); var p = $("#i_pwd").val(); alert(n+":"+p); }); });
示例使用的是submit(function),在提交的时候输出要提交的数据。
窗口事件
窗口事件针对窗口或元素的尺寸改动、滚动条滑动等情况做出响应,resize事件是日常可能会应用到的事件,它是窗口尺寸变化事件。当窗口的尺寸发生改变时,修改div元素的背景色为绿色:
$(document).ready(function(){ $(window).resize(function(){ $("div").css("background-color","green"); }) });
其它事件
on/off:on用来向指定的元素添加事件,而off则用来移除on添加的事件。bind与on的作用是相同的,不过推荐使用on。$(document).ready(function(){ $("p").on("click",function(){ alert('hello'); }); $("#hideshow").click(function(){ $("p").off("click"); }); });
hover:用来指定元素的两个事件,分别是鼠标滑入元素、鼠标滑出元素。需要注意的是,在jQuery 1.7版本前,该方法触发的是mouseenter和mouseleave事件;而在jQuery 1.8版本后,该方法触发的是mouseover和mouseout事件。
$(document).ready(function(){ $("form").hover(function(){ $("div").hide(); },function(){ $("div").show(); }); });
event:event应该算是一个对象,它有许多的属性,可以使用它来获取当前的DOM元素、鼠标位置、事件的值等信息。
$(document).ready(function(){ $("div").mousemove(function(event){ $("span").html(event.pageX+","+event.pageY); }); });
change:当元素的值发生改变时触发的事件。
$(document).ready(function(){ $("input").change(function(){ $(this).css("background-color","blue"); }); });
相关文章推荐
- jQuery事件总结
- jQuery使用手册之 事件处理
- jQuery的事件模式(翻译jQuery in action第四章4)
- JQuery 绑定变化事件
- [jQuery教程]jquery基础教程二(鼠标点击事件)
- JQuery实例入门(添加鼠标事件)
- jQuery的事件模式(翻译jQuery in action第四章5)
- 为jQuery添加自定义事件机制
- jQuery中Ajax事件
- jQuery常用方法事件属性
- JavaScript事件详解-jQuery的事件实现(三)
- jQuery的事件模式(翻译jQuery in action第四章)
- jQuery的事件模式(翻译jQuery in action第四章3)
- JQuery 里面的 click 事件会累加
- Jquery使用手册6--事件处理 作者:choy
- jQuery - Events事件 - click单击
- JQUERY级联操作绑定事件[jQuery,cascade,event,bind,trigger]
- jQuery事件
- 使用Jquery的鲜活绑定(lively-ness),解决“新添加的元素,事件不可用”的问题
- jquery:DOM更改后重新绑定事件的问题