jquery中的事件处理详细介绍


Posted in Javascript onJune 24, 2013

1.页面载入完毕响应事件
所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了。
①jQuery中的$(doucument).ready()事件
ready(fn)是jQuery事件模块中最重要的一个函数。这个方法可以看作是对window.onload注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行。
ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Function 当DOM载入就绪时绑定一个要执行的函数
而它有一种很简单的缩写形式$(document).ready(function(){}) => $(function(){})
②window.onload()事件和$(document).ready()事件的比较
window.onload()=function(){}
如果使用多个window.onload(),则只有最后一个绑定的函数能被执行,它将覆盖前面所有window.onload()绑定的函数。
如果使用多个$(),则它们都能被执行。
需要注意的是如果<body onload> body标签的onload事件已经注册了某个函数 则$()事件注册的函数将不会被执行

2.绑定与反绑定事件监听器
①绑定事件
⑴bind(type,[data],fn)函数
就是将某函数与某元素的某事件绑定在一起 $("#id").click(function(){})就是将一个匿名函数与id元素的click事件绑在一起
但上面的例子其实只是缩写形式,因为其是简单常用的事件绑定,正规写法应如下:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 返回值:Object 参数-type:事件类型String data:可选,作为event.data属性值传递给后面fn的实参Object fn:绑定到事件上的函数Function
⑵为处理函数传递参数
这里用到bind()函数的第二个参数及event.data属性为fn函数传递参数

<input id="Text2" type="text" /> 
$("#Text2").bind("click",{first:"1",second:"2"},function(event){ 
if(event.data.first=="1"){$(this).val("欢迎光临")} 
if(event.data.second=="1"){$(this).val("")} 
}); 
})

第二个参数为一个json对象,在fn函数中通过event.data通过键名获得参数值
⑶阻止浏览器默认的行为
有时bind绑定的函数会与浏览器默认的操作冲突,这时如果想阻止浏览器默认的操作,只需在fn后面加一句return false;
$("form").bind("submit",function(){return false;})

②反绑定事件
就是解除与某元素的某事件绑定在一起的某函数
unbind([type],[fn名]) 返回值:Object 参数-type:事件类型String fn名:要被解除绑定的函数名Function
以上俩参数都是可选参数 如果参数为空,就是解除所有匹配元素的所有事件所绑定的函数
$(function(){$("#btn1").click(function(){ 
$("input[type=text]").unbind()}) 
})

单击btn1后,解除所有为type=text文本框的事件绑定的所有函数
③一次性的事件绑定
就是为某元素的某事件所绑定的某函数只能被执行一次
one(type,[data],fn) 返回值:Object 参数-type:事件类型String data:可选,作为event.data属性值传递给后面fn的实参Object fn:绑定到事件上的函数Function
使用与bind()函数一致,不同之处就是one里的fn只能被执行一次。

3.事件触发器
上述绑定的一些函数,需要用户执行一定的操作才会被执行,如click事件绑定的函数需要用户单击相应的元素才会被执行。但事件触发器可以用代码模拟用户的操作动作进而执行事件所绑定的函数,而不需要用户进行某些操作。
trigger(type,[data]) 返回值:Object 参数-type:事件类型String data:可选,传递给所触发的事件所绑定的函数的实参Array(是一个javascript数组) 触发所匹配的元素的某类事件所绑定的所有函数,当这类事件与浏览器的默认操作冲突时该事件触发器会执行浏览器默认的操作

<input id="Text1" type="text" value="输入用户名" /> 
<input id="Text2" type="text" /> 
$(function(){$("#Text1").bind("click",function(){$(this).val("")})}) 
$(function(){$("#Text2").click(function(event,pamas1,pamas2) 
{$(this).val("trigger事件触发器"+pamas1+pamas2)}) 
}) 
$(function(){$("input[type=text]").trigger("click",["1","2"])})

如上代码,虽然为俩文本框的单击事件绑定了函数,可最后一句代码也为这俩文本框的单击事件设置了触发器,所以不需要用户单击相应的文本框就能执行它们的单击事件所绑定的函数。另外该触发器还为它所触发的函数传递了参数,是一个javascript数组,可以在Text2的单击函数里看到参数的获得。
trigger函数所触发的事件与浏览器的默认操作冲突时该事件触发器会执行浏览器默认的操作,而triggerHandler函数则不会执行浏览器默认的操作。
triggerHandler(type,[data]) 与trigger的使用一致

4.事件的交互处理
①hover:模仿鼠标悬停
hover(over,out) 返回值:Object 参数-over:鼠标移到元素上触发的函数Function out:鼠标移出元素触发的函数Function

<input type="text" id="hover1" /><span id="hoverpd" style="display:none;">判断用户输入</span> 
$(function(){$("#hover1").hover(function(){ 
$("#hoverpd").show();},function(){ 
$("#hoverpd").hide();}) 
})

②toggle:多次单击的循环响应
为匹配的元素的单击事件添加许多绑定函数,这些函数随着不停的单击该元素而循环执行
toggle(fn1,fn2,fn3...) 返回值:Object 参数-fn1,fn2,fn3...要循环的函数Function
<input type="button" id="toggle1" value="toggle"/> 
var i=0; 
$(function(){$("#toggle1").toggle(function(){i++;$("#hover1").val(i)}, 
function(){i=i+2;$("#hover1").val(i)}) 
})

5.jQuery的内置事件类型
①jQuery内置事件函数的两种声明方式
不带参数的事件函数-事件类型名() 模拟了用户的操作
带参数的事件函数-事件类型名(事件函数)
$($("#id").click(function(){})) 带参数的事件函数
$($("#id").click(function(){}); $("#id").click();) 不带参数的事件函数-不单击#id也会执行相应函数 即模拟了用户操作
②jQuery内置事件类型分类
⑴浏览器相关事件
error(fn) 匹配元素发生错误时触发某函数,error事件没有标准,如当图像src无效时会触发图像的error事件
load(fn) 匹配元素加载完后触发某函数,如window是在所有DOM对象加载完才触发,其他单个元素是在单个元素加载完后触发
unload(fn)
resize(fn) 匹配元素改变大小时触发某函数
scroll(fn) 滚动条发生变化时触发
⑵表单相关事件
change(fn) 在匹配元素失去焦点时触发,也会在元素获得焦点后触发
select(fn) 当用户在文本框中选中某段文字时触发
submit(fn) 提交表单时触发
⑶键盘操作相关事件
keydown(fn) 键盘按下时触发
keypress(fn) 键盘按下又弹起时触发 顺序是keydown->keyup->keypress
keyup(fn) 键盘弹起时触发
⑷鼠标操作相关事件
click(fn) 顺序是mousedown->mouseup->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn) 在匹配元素上移动时触发,事件处理函数会被传递一个变量--事件对象(其clientX,clientY属性代表鼠标坐标)
⑸界面显示相关事件
blur(fn) 匹配元素失去焦点时触发 即可是鼠标 也可使Tab键
focus(fn)
Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 #Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 #Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
You might like
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
React简单介绍
2017/05/24 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
跟老齐学Python之用Python计算
2014/09/12 Python
Python程序中设置HTTP代理
2016/11/06 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python global全局变量函数详解
2018/09/18 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
给酒店员工的表扬信
2014/01/11 职场文书
初中同学聚会感言
2014/02/11 职场文书
植树节活动总结
2014/04/30 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript