三jquery事件详解

一：常见的事件系统：

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

二：事件的方向：

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

三：jquery中的事件绑定和移除 ，强制触发：

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

（2）旧版本：
效率从低到高
bind(‘click’,fun) 针对元素进行绑定；针对document进行绑定；选择器，针对子元素进行绑定
3.2移除事件：
（1）现在常用：
off(‘click’,fun)

（2）旧版本：
效率从低到高
unbind(‘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,有问题可以互相交流