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-keleyi-com" /><span id="hoverpd-keleyi-com" style="display:none;">判断用户输入</span>
$(function(){$("#hover1-keleyi-com").hover(function(){
$("#hoverpd-kel"+"eyi-com").show();},function(){
$("#hoverpd-keleyi-com").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)

原文：http://keleyi.com/a/bjac/6y2adkcl.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

jQuery标签：http://www.cnblogs.com/jihua/tag/jQuery/

jQuery中的事件处理的更多相关文章

  1. JQUERY中的事件处理：RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

    return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...

  2. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  3. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  4. 解决上一篇jquery中on的疑惑

    内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后  疑问和解答可以解决所有的疑惑  看了之后能更好的整篇文章. on()函数 ...

  5. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  6. 四、jquery中的事件与应用

    当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...

  7. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  8. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  9. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

随机推荐

  1. js中的块作用域

    今天我们来一起研究下JavaScript中的变量作用域问题,话不多说,直接上代码. <script type="text/javascript"> (function( ...

  2. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  3. 我和linux的第二十二天

    这几天学校的事情比较多,空闲时间也有,但没有利用起来.前些天听国学课,发觉自己心性还是不很成熟,以前自觉遇到君子应用君子的方法相处,遇到小人用小人的方法对待,老师一句话,疏清了自己.当我们用小人的方法 ...

  4. 前端学PHP之函数

    × 目录 [1]函数定义 [2]函数参数[3]返回值[4]变量函数[5]回调函数[6]递归函数[7]加载函数[8]匿名函数 前面的话 PHP 的真正力量来自它的函数:它拥有超过 1000 个内建的函数 ...

  5. Android 开源框架Universal-Image-Loader完全解析（一）--- 基本介绍及使用

    转载博客:http://blog.csdn.net/xiaanming/article/details/26810303 大家好!差不多两个来月没有写文章了,前段时间也是在忙换工作的事,准备笔试面试什 ...

  6. Android图片选择器

    1.概述 应公司项目需求,要做一个图片选择器,网上搜索了一些源码,我在别人的基础上进行了修改,另外页面也进行了重整,我的是先加载图片文件夹列表,然后再进入选择图片.            参考博客地址 ...

  7. 在博客中使用LaTeX插入数学公式

    在博客中使用LaTeX插入数学公式 在学习机器学习中会接触到大量的数学公式,所以在写博客是会非常的麻烦.用公式编辑器一个一个写会非常的麻烦,这时候我们可以使用LaTeX来插入公式. 写这篇博文的目的在 ...

  8. C#枚举类型的常用操作总结

    枚举类型是定义了一组"符号名称/值"配对.枚举类型是强类型的.每个枚举类型都是从system.Enum派生,又从system.ValueType派生,而system.ValueTy ...

  9. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  10. WebSocket in ASP.NET Core

    一.WebSocket WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有1.1和1.0 ...