三jquery事件详解

作者: 向布谷鸟说早安 | 来源:发表于2017-02-16 10:57 被阅读37次

一:常见的事件系统:

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

二:事件的方向:

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,有问题可以互相交流

相关文章

  • 三jquery事件详解

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

  • jQuery粗略源码解析6 事件和事件对象

    1 事件 1.1 事件命名空间 详解: https://www.haorooms.com/post/jquery_...

  • 二阶段day9-jQuery

    一、jQuery jquery 代码 编程 二、jQuery jQuery用法详解http://www.runoo...

  • 二阶段day10-jQuery

    jQuery用法详解http://www.runoob.com/jquery/jquery-tutorial.html

  • jQuery.extend 函数使用详解

    jQuery.extend 函数使用详解 JQuery的extend扩展方法:Jquery的扩展方法extend是...

  • jQuery.extend和jQuery.fn.extend

    jquery的extend和fn.extend jQuery.extend 函数使用详解

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

  • jQuery事件详解之bind()

    当文档加载完毕,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法来对匹配的元素进行事件绑定。 第一个...

  • iOS 事件以及手势的处理

    iOS 事件以及手势的处理 首先引用深入浅出iOS事件机制,iOS触摸事件处理详解,详解iOS触摸事件与手势识别三...

  • $ 与extend

    原文: jQuery.extend 函数使用详解 JQuery的extend扩展方法:Jquery的扩展方法ext...

网友评论

    本文标题:三jquery事件详解

    本文链接:https://www.haomeiwen.com/subject/xwpcwttx.html