jQuery事件 -- 课件

jQuery的事件类型 — 课程介绍
1、鼠标事件
2、键盘事件
3、其他事件
4、事件参数
5、事件绑定和取消 — 稍微了解一下；

鼠标事件
1、click() — 鼠标单击时触发
2、Dblclick() — 鼠标双击时触发
(1) 注意点：双击事件是由两次单击完成，所以双击事件必定回触发单击事件，一般情况下，单击双击都是分开执行的，不会一起执行！
3、单击事件可以拆分 — 鼠标按下和鼠标放开
(1) mousedown — 鼠标按下时触发
(2) Mouseup — 按下的鼠标放松时触发
(3) 注意：以上两个事件鼠标的左右键都可以触发，只是右键一般被作为菜单执行键，一般使用的是左键；
4、Mouseenter() — 鼠标进入时触发
5、Mouseleave() — 鼠标移出时触发
6、Mouseenter和mouseleave合并的事件：hover(over,out) — 鼠标进入和移出时触发
(1) 注意：鼠标进入和移出时触发两个函数；
7、mouseover() — 鼠标进入指定元素及其子元素时触发
8、Mouseout() — 鼠标移出指定元素及其子元素时触发
(1) 正是因为不断的触发，所以over和out不会经常使用，还是建议使用enter和leave
9、Mousemove([[data],fn]) — 在DOM内部移动时，发生mousemove事件；
(1) 很多捣蛋程序都是通过mousemove做出来的，只要鼠标稍微移动，就会触发事件，很消耗资源；
10、Scroll() — 鼠标滚动事件 — 当滚动指定的元素时，会发生scroll事件；


键盘事件
1、keydown事件 — 当键盘或者按钮被按下时，会发生keydown事件
2、Keyup事件 — 当按钮被松开时候，发生keyup事件，它发生在当前获得焦点的元素上
3、兼容旧浏览器 — keypress — 当键盘或者按钮被按下时，发生keypress事件
(1) 主要就是独特在于它必须时输入内容时候触发
(2) 比如：输入法、（空格键）、CTRL、backspace
(3) 除此之外，keypress和keydown没有任何区别


其他事件：
1、ready() — 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
2、resize() — 当调整浏览器窗口的大小时候，发生resize事件
(1) 改变浏览器窗口才可以有效的执行resize事件，而document文档只是浏览器窗口的一个对象
3、Focus事件 — 当元素获得焦点时触发
4、Blur事件 — 当元素失去焦点时触发
5、Change() — 当元素的值发生改变的时候，触发change事件
6、Select() — 当textarea或者文本类型的input元素中的文本被选择时，会发生select事件
(1) 只有可编辑的文本和文本域等可以产生select事件
7、Submit() — 当提交表单时候，会发生submit事件
(1)
① 如果不在form里面，相当于普通按钮
② 如果在form里面，相当于submit提交按钮
③ Button是H5新增的标签
④ 在ie浏览器中，是普通按钮；
⑤ 在非ie浏览器，是提交按钮
(2)


事件参数
1、Event — 我们需要通过event获取鼠标位置和键盘位置，否则监听事件无意义
所有事件都会传入event对象作为参数，可以从event对象上获取很多信息；


事件绑定和取消
1、On(events,[selector],[data],fn) — 在选择元素上绑定一个或多个事件处理函数；
(1) On绑定事件至少包含两个参数：第一个是事件类型，第二个是要做的事—执行函数
2、On(events,[selector],[data],fn) — 多个事件处理函数 — 可以以对象的形式
3、拓展 — add() — 表示把元素添加已存在的元素组合中
4、事件的取消 — off(events,[selector],fn) — 在选择元素上移除一个或多个事件处理函数；
(1) 分析需求：我们点击“绑定”按钮时候，触发“这个按钮没效果”，点击产生隐藏的div的事件
(2) 点击取消绑定的话，“这个按钮没效果”无法触发隐藏的div
(3) Find() — 返回被选元素的后代元素 后代：子 孙 曾孙。。。。
(4) One(type,fn) — 为每一个匹配元素的特定事件（click）绑定一个一次性的事件处理函数


处理项目的几个bug！
1、刚打开页面的时候，按一下左键没有任何变化，按两下才开始切换
2、CTRL+F5刷新页面，按下右键之后的效果；
3、F5刷新之后，键盘左右切换多次，轻轻移动鼠标就会显示最后一张