jQuery事件 学习打卡

思维导图

事件类型

1、鼠标事件
2、键盘事件
3、其他事件
4、事件参数
5、事件绑定和取消

鼠标事件

鼠标事件 – 类型1

1、click 鼠标单击时触发
2、dblclick 鼠标双击时触发
总结
1、双击事件是由两次单击完成，所以双击事件执行的时候必定会触发单击事件。
2、一般情况下，单击双击分开执行，不会一起执行。

鼠标事件 – 类型2

1、mousedown 鼠标按下时触发
2、mouseup 按下鼠标放松时触发

鼠标事件 – 类型3

1、mouseenter 鼠标进入时触发
2、mouseleave 鼠标移出时触发
3、hover (over,out) 鼠标进入和退出时触发两个函数 ，相当于mouseenter和mouseleave

鼠标事件 – 类型4

1、mouseover 鼠标进入指定元素及其子元素时触发
2、mouseout 鼠标移出指定元素及其子元素时触发
3、mousemove 在DOM内部移动时发生这个事件
总结
很多捣蛋程序通过mousemove做出来的。
拖拽文件上传用到！

鼠标事件 – 类型5

scroll 当滚动这个元素时会发生这个事件

键盘事件

键盘事件 – 类型1

keydown 当键盘或者按钮被按下时，触发keydown事件。
总结
1、有时候我们通过获取key值判断按下什么键
2、可以通过获取键位获取输入什么键
3、通过keycode：ASCII值判断

键盘事件 – 类型2

keyup 当按钮松开时，触发keyup事件，发生在当前获得焦点的元素上。
总结
1、现在的浏览器基本上可以使用keydown和keyup，发生在当前获得焦点的元素上
2、旧浏览器保留一个keypress事件

键盘事件 – 类型3

keypress 当键盘或者按钮按下时，发生keypress事件
总结
1、独特在于必须输入内容才会触发
2、比如输入法、回退，Ctrl， alt不会触发的
3、现在版本和keypress keydow几乎没有区别

其他事件

1、ready() 当DOM载入就绪可以查询或者操纵时绑定一个要执行的函数
2、reaize() 当浏览器调整浏览器窗口大小时，触发事件
3、focus()/blur() 当元素获得或者失去焦点时触发事件
4、change() 当元素得值发生改变时，发生change事件
5、select() 当textarea或者文本类型的input文本被 选择时，会发生select事件
总结 只有可编辑的文本和文本域等可以产生select事件
6、submit() 当提交表单时，发生submit事件
submit具有三个功能
a. 提交表单
b. 阻止提交表单
c. 提交表单时做一些我们所需要的做的事
总结
1、button不再form就是普通按钮
2、button在form中，相当于submit提交按钮
3、button是html5新增的
4、在ie中就是普通按钮
5、在非ie中就是提交按钮

事件参数

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）绑定一个一次性的事件处理函数