三jquery事件详解

一:常见的事件系统:

观察者模式:在触发事件的时候函数才会执行(大话设计模式)
事件的好处:可以先对外公布事件

二:事件的方向:

jquery没有提供捕获阶段的API(要使用系统原生的addEventListener添加事件)
triggerEvent();原生js触发事件
removeEventListener()
冒泡 (由内到外) 捕获 (由外到内)先捕获后冒泡

三:jquery中的事件绑定和移除 ,强制触发:

3.1绑定事件:
(1)现在常用:
click(fun) on(‘click’,fun)

(2)旧版本:
效率从低到高
bind(‘click’,fun) <live('click',fun) <delegate('slector','click',fun)
针对元素进行绑定;针对document进行绑定;选择器,针对子元素进行绑定
3.2移除事件:
(1)现在常用:
off(‘click’,fun)

(2)旧版本:
效率从低到高
unbind(‘click’,fun) <die('click',fun) <undelegate('slector','click',fun)
针对元素进行绑定;针对document进行绑定;选择器,针对子元素进行
3.3强行触发事件:trigger('click') click();应用场景:三级联动表单

四:事件对象

所有的事件都有一个event参数,参数就是事件对象,可以通过在函数内打印arguments验证:



4.1事件对象的方法:
1.stopPropagation();阻止事件冒泡到父级

2.stopImmediatePropagation();阻止事件本身冒泡(一个事件可能被绑定多个事件处理函数,阻止后剩下的不会执行)

3.preventDefault();阻止事件默认行为的触发,应用场景(提交表单前的验证确认,删除前的验证确认,通过confirm弹出框,也可以通过return false来阻止默认事件,但会有兼容性问题;下拉框在点击别的地方才隐藏,阻止冒泡)

4.2事件对象的属性:
1.type:事件的性质(事件的类型)evt.type

2.target:触发该事件的对象evt.target可以判断事件是被谁触发的

五.jquery中的事件

5.1鼠标事件(8个)
mouseover (从框内元素出来到框里也会被触发),mouseenter(大框里面)(鼠标进入)
mousedown(点击)
mouseup(点击完成)
click
dbclick
mouseout(和mouseover对应,这两个不常用),mouseleave(和mouseenter对应)
长按的实现:添加事件
属性:pageX鼠标相当于文档左边的位置 pageY鼠标相当于文档上边的位置 which使用哪个键触发的事件1左2中3右

5.2键盘事件
keydown(按下来) keypress(按住)(尽量不要用) keyup
属性:which

5.3表单事件
focusin select(选中) change focusout submit (在form中才被提交)

六jquery简单特效

小知识:一个游戏要看起来流畅,至少是16毫秒
每秒60帧,1000ms/60帧=16ms/帧
动画每秒24帧就可以了 1000ms/24=41ms/帧
6.1显示
show fadeIn slideDown
6.2隐藏
hide(dispaly:none;) fadeOut slideUp
6.3切换
toggle fadeToggle slideToggle
所有的动画都支持两个参数的简单用法,第一个参数是动画的持续时间(是毫秒,或者字符串),第二个参数是动画执行完后的回调函数
用原生js会有兼容性问题,而用jquery可以解决这个问题
6.4自定义动画animate
动画队列:queue dequeuer clearQueue delay

本文所涉及的代码链接https://github.com/wangyiman/jqueryEventExercise
欢迎star或者fork,有问题可以互相交流

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,629评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,295评论 0 6
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,361评论 0 8
  • 一个人走着,在夕阳西下的路上 一个人走着,朝着阳光露出笑容 好像一切都显得那么孤独 孤独的让人心疼 即便是个笑脸 ...
    陌无人阅读 289评论 0 0
  • 自从来到希腊雅典这个美丽又鲜活的欧洲古城,凡哥被吸引的除了眼前的考古遗迹或壮丽美景,更无法抗拒的是有缘千里来相遇的...
    喵子然阅读 447评论 5 2