xml地图|网站地图|网站标签 [设为首页] [加入收藏]

jQuery源码分析,JQuery知识快览之二

来源:http://www.ccidsi.com 作者:集成介绍 人气:74 发布时间:2019-11-27
摘要:事件是脚本语言的主题。本文将为我们介绍JQuery援助的有的风浪和什么自定义事件   JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload四个Document加载事件。load和unload事件从

事件是脚本语言的主题。本文将为我们介绍JQuery援助的有的风浪和什么自定义事件

 

JQuery内置事件

1.Document加载事件

JQuery提供了ready,load,unload四个Document加载事件。load和unload事件从1.8版开头就不扶助接受了,ready能够说是大家用得最多的二个事件。那是叁个最非常的风浪,全数的JQuery语句的实施都始于ready事件。常常都在这里个事件的响应函数里绑定其余的响应函数,施行代码等。

争持于JavaScript的load事件来讲,ready事件更优,因为load事件是在一个页面包车型大巴装有能源,如图片等都下载达成之后爆发,而ready事件在DOM下载完成后就生出了。

它有多样采用格局:

在用ready事件时索要专心如下四点

1)ready函数的任务:借使脚本信赖于CSS属性,则须要在引进css文件之后引进脚本文件,假如脚本依赖于有个别能源,则必要用load事件。

2)<body onload="">属性和JQuery的ready,load事件冲突,不要一齐利用。

3)不要使用.on("ready",handler)来替代.ready函数。

4)$和其它库中定义冲突时,可用如下方式写代码:

 

2.鼠标事件

click

dblclick

mousedown

mouseup

mousemove

mouseenter

mouseleave

mouseover

mouseout

hover

注意事项:

1)最佳不用对同一成分同反常间增添click和dblclick事件的响应函数,因为对那五个事件的分别会促成一定的麻烦

2)mouseenter,mouseleave和mouseover,mouseout的不等在于,当鼠标移动到某成分上或离开某成分时,其祖先节点也会收下到mouseover或mouseout事件,可是不会收下到mouseenter或mouseleave事件,所以推举应用mouseenter和mouseleave。

3)hover是mouseenter,mouseleave的组合。

 

3.键盘事件

keydown

keyup

keypress

注意事项:

1)键盘事件只发送给当前的关节成分,因为form常常能够赢得难点,所以大家常把事件绑定到form上,假设想完毕连忙键,能够将事件绑定到document上。

2)当输入文本时相符用keypress,当火速键时相符用keydown,keyup.

 

4.表单事件

focus

blur

focusin

focusout

change

select

submit

注意事项:

1)focusin,focusout和focus,blur的界别在于,当某成分获得或许失去焦点时,其祖先节点也会选用focusin或focusout新闻,而不会收取focus或blur音讯。

2)对选择框等成分,只要顾客做出取舍就能够触发change事件,而对<textarea>等因素,当成分失去核心时才有一点都不小希望触发change事件。

3)select事件只针对<input type="text">和<textarea>的文本选择操作,设置文本的插入点并不会唤起select事件,选拔网页静态文本也不会挑起select事件

 

5.浏览器事件

resize:浏览器窗口的resize事件,二次resize窗口的动作恐怕会掀起五个resize事件。

scroll:浏览器窗口,可滚动的frame,有scroll属性的要素都能生出scroll事件

error:1.8版开首不赞同使用了

 

作者:nuysoft/高云 QQ:47214707 EMail:[email protected]

JQuery事件函数

JQuery针对各样事件,都起码定义了五个版本的事件函数,以click事件为例,JQuery定义了两种函数,都名称为click,只是参数差异,二个函数用函数做参数,用于开展绑定事件管理函数,另多少个函数没有必要参数,用于触发事件。如

$("button").click();//trigger click event

部分触发事件的函数如select以致能发出select行为,调用.select()能入选当前成分里的持有文件。

在事件管理函数中,能够用带参数的函数方式来拿到event中的数据,能够用$(this)来获得触发事件的目的。上面看多个简单的例证

click demo








click me
click me

 

 

JQuery事件对象

在地方的例证中大家用到了事件目的里的特性,下边我们来归纳看一下风浪目的有何样属性(部分私家感到关键的性质,不全):

target

currentTarget(不推荐)

留心:this和currentTarget都以绑定事件的靶子,对于delegated events,则是selector相配的因素。而target是实在触发信息的对象。target为currentTarget对象或其子孙节点。

relatedTarget得到相关对象,如对于mouseleave事件,相关对象是收获mouseenter事件

静心:target,currentTarget,relatedTarget和this都以DOM成分,还索要要用$来转变为JQuery能操作的指标,如

$(event.currentTarget).css("background-color","red");

pageX

pageY

which

对此mousedown和mouseup事件来说,1意味左键,2意味中间键,3表示右键

对此键盘事件来讲,则是呼应的ASCII码

altKey

ctrlKey

shiftKey

metaKey

type

data:数据传入情势为.click( [eventData ], handler(eventObject) )

 

 

JQuery的风云实践流程

三个事变触发后,JQuery将先查看触发该事件的要素是不是有绑定对应的音讯管理函数,要是有则按消息管理函数的绑定顺序依次推行,当该因素的风云都管理完了后,假如该事件是冒泡事件,则相继向其父节点举行冒泡的长河,继续检查父节点,父节点的父节点。。。最终再举行该新闻的暗许响应行为。

通过对事件指标进行一定的操作,能更正这些流程。

event.preventDefault();能够幸免消息的私下认可响应行为。

event.stopImmediatePropagation();禁绝之后的新闻管理函数和冒泡进程,不禁绝暗中同意响应行为。

event.stopPropagation();不禁绝之后的音讯管理函数和暗中同意响应行为,然则禁绝冒泡进度。

在函数里return false;效果和event.preventDefault() event.stopPropagation()肖似。甚至你能够直接用false来顶替多个return false的函数,如下:

click demo








link

 

下边八个函数分别判定方面多少个函数是或不是早就试行。

event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()

 

10.2        源码结构

自定义事件

在好几景况下,你或许须求定制你本人的风浪,上边是JQuery官方网站给的三个总结的事必躬亲:

假设不想用自定义数据,可粗略的写成这样

 

jQuery的风浪模块主要包罗以下内容:

事件进级

前面,大家看看用on来绑定了一个自定义事件,用trigger来触发了这些自定义事件,其实JQuery为事件的绑定和接触提供了有些更头晕目眩的处理方法,上边大家来学习一下。

 1.平地风波的触发

JQuery提供了trigger和triggerHandler二种触发事件的函数。

.trigger会为其采纳器中全部的因素触发事件,且事件会展开冒泡处理,不过不会挑起平地风波的暗许行为。

.triggerHandler只会为其选用器中的第二个因素触发事件,且事件不会进展冒泡管理,也不会孳生平地风波的默许行为。

除此以外七个函数的重临值也是差异样的。

2.事件管理函数的绑定和平解决绑定

1.7版新扩大了on和off四个函数来进展事件管理函数的绑定和平解决绑定,这些函数基本代表了原来的bind,unbind和delegate,undelegate的成效,所以今后JQuery官方推荐用on和off来取代另两组函数。

1)on有二种样式

.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )

里头第三种情势的参数events能够是事件字符串和呼应管理函数的数组,个人不爱好这种形式,以为看着乱,不比多写多少个on呢。

当不提供selector时,为直接绑定情势,当事件传递到被绑定的指标时,就能够被触发。

当提供selector时,为代理绑定方式,当事件传递到被绑定的目的时,会检查在冒泡进程中,是还是不是存在满意selector条件的成分,假如有,则会被触发,未有则不会触发。

干什么需求有代理绑定情势呢?有七个对代理绑定形式须要的场景:

a.因为举办事件绑定的时候,被绑定的目的必得已经存在,所以对于那么些会动态参预的因素,就足以用代理绑定格局,将事件绑定到其曾经存在的最临近的祖辈节点上。

b.某父节点下有四个节点必要响应同二个事变。那个时候使用代理绑定形式能提升功能。

click demo








link

 

2)off函数和on函数相对,也可以有二种方式,且扶植直接绑定和代办绑定二种情势。

JQuery提供了依据事件名称,空间,选取器,和事件管理函数的结缘条件来删除事件绑定的各个福利方法。

 

3)one函数,音信绑定只被触发三回就能够被移除。极其的是在代理绑定格局中,只要事件传递到被绑定的靶子,不管是或不是被触发,都会移除音信绑定。

 

 

JQuery内置事件 1.Document加载平地风波 JQuery提供了ready,load,...

 

 

 子模块

 接口

 

1

 事件管理工具函数

 jQuery.event.add/remove/trigger/handle/fix/special

 

2

 事件对象

 jQuery.Event(模拟实现部分DOM3事变接口卡塔 尔(阿拉伯语:قطر‎

 

3

 事件特例

 ready live beforeunload

 

mouseenter mouseleaver(修正为mouseover mouseout)

 

focusin focusout submit change(浏览器不匡助的冒泡事件卡塔 尔(英语:State of Qatar)

 

本文由68399皇家赌场发布于集成介绍,转载请注明出处:jQuery源码分析,JQuery知识快览之二

关键词: 68399皇家赌场

最火资讯