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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
div模拟选择框示例代码
Nov 03 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
vue实现淘宝购物车功能
Apr 20 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
Wordpress php 分页代码
2009/10/21 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
js实现每日签到功能
2018/11/29 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Python 含参构造函数实例详解
2017/05/25 Python
python简单实例训练(21~30)
2017/11/15 Python
python清理子进程机制剖析
2017/11/23 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
python操作redis数据库的三种方法
2020/09/10 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
秘书专业自荐信范文
2013/12/26 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年宣传工作总结
2015/04/08 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
求职自我评价参考范文
2019/05/16 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis