JQuery 事件

jq事件分类

事件类型

所有的事件都是原生js 去掉 on
用户所有的行为都是事件
window:scroll resize
鼠标的 mouseover mouseout mouseover mousedown click
键盘的 keydown keyup
表单的 change input fouce …
手指头事件：touchstart touchend touchmove…
…

事件绑定

$().on(eventTyle,fn)
parm1:eventType 表示事件类型
parm2:fn 事件处理函数： 作用：对用户触发的这个事件进行处理

事件删除

$().off(eventType,fn);
parm1:eventType 表示事件类型
注意；删除事件的元素与绑定事件的元素一致,事件处理函数为一个函数

事件委托

$(父元素).on(eventType,子元素,fn)
事件委托：给父元素绑定事件，子元素触发事件；利用事件的冒泡行为；

• e.target 记录触发事件的元素对象
• $(this) 指向绑定事件的元素；而不是触发事件的元素

自定义事件

$().on('自定义事件,fn);
$().triger(‘自定义事件’,data) 触发自定义事件 data 会给事件处理函数传递实参

• 可以触发浏览器的默认事件。有的时候需要阻止默认事件

$().trierHandle() 作用与 triger 一致 但是不会触发浏览器默认行为。不需要阻止浏览器默认行为

jq动画

1： 显示隐藏
原理：通过同时设置元素高度和宽度实现显示隐藏效果

• hide(time,fn) 隐藏 parm1:time 表示动画执行时间 parm2:fn 动画执行完毕后做什么.
• show(time,fn) 显示 parm1:time 表示动画执行时间 parm2:fn 动画执行完毕后做什么.
• toggle(time,fn) 互斥逻辑显示隐藏 parm1:time 表示动画执行时间 parm2:fn 动画执行完毕后做什么.

2：滑动显示隐藏
原理：通过改变元素的高度实现滑动显示隐藏
parm1:time 表示动画执行的时间
pre2:fn 表示动画执行完毕后做什么

• slideDown(time.fn)
• slideUp(timer,fn)
• slideToggle(time,fn)

3：淡入淡出
原理：通过 transform 和透明度 完成显示隐藏效果

• fadeIn(tie,fn) 显示
• fadePut(time,fn) 隐藏

4：自定义动画
原理：动画函数的封装

• animate(obj,time,fn) parm1:obj 表示执行动画的css样式 parm2:time 动画执行时间
  parm3:fn 表示动画执行完毕后做什么