元素的常用事件
+ 再 JS 里面, 事件分为几个大类
1. 鼠标事件
2. 键盘事件
3. 浏览器事件
4. 表单事件
5. 拖拽事件
6. 触摸事件(移动端)
7. 其他事件
+ JS 里面的所有原生事件没有大写字母
鼠标事件
1. click => 鼠标左键单击
2. dblclick => 鼠标左键双击
3. contextmenu => 鼠标右键单击
4. mousewheel => 滚轮滚动
5. mousedown => 鼠标按下
-> 鼠标按下, 不光是左键
-> 右键, 滚轮键, 功能键
6. mouseup => 鼠标抬起
7. mousemove => 鼠标移动
8. mouseover => 鼠标移入
9. mouseout => 鼠标移出
10. mouseenter => 鼠标移入
11. mouseleave => 鼠标移出
12. ...
键盘事件
+ 不是所有元素都能触发
+ 表单元素(有选中效果), document, window
1. keydown => 键盘按下
-> 只要是你键盘上的按键就可以触发
-> 中文输入法下, 也好使
2. keyup => 键盘抬起
3. keypress => 键盘按下
-> 必须要准确嵌入到文本框里面的内容才会触发
-> 出现再文本框里面的内容要和你按下的按键一致
浏览器事件
1. load => 页面加载完毕
2. scroll => 滚动
3. resize => 窗口尺寸改变
4. offline => 网络断开
5. online => 网络恢复
6. hashchange => 当 hash 值改变的时候
7. ...
表单事件
+ 表单事件绑定给 表单元素 和 form 标签的
1. change => 表单内容改变
-> 当表单失焦的时候, 如果和聚焦的时候不一样叫做改变
2. input => 表单输入事件
-> 只要你再表单内部输入内容就会触发
3. focus => 表单聚焦事件
4. blur => 表单失焦事件
5. submit => 表单提交事件
-> 事件是绑定给 form 标签使用的
-> 当你点击 form 里面的 submit 的时候触发
6. reset => 表单重置事件
-> 事件是绑定给 form 标签使用的
-> 当你点击 reset 按钮的才能触发
拖拽事件
+ 一般元素想触发拖拽行为, 要给元素加一个属性
+ draggable="true"
+ 需要两个元素完成一个完整的拖拽
1. 拖拽元素
2. 目标元素
1. dragstart => 拖拽开始
-> 绑定给拖拽元素的
2. drag => 拖拽移动
-> 绑定给拖拽元素
3. dragend => 拖拽结束
-> 绑定给拖拽元素
4. dragenter => 拖拽进入目标元素
-> 绑定给目标元素
-> 光标进入目标元素
5. dragleave => 拖拽离开目标元素
-> 绑定给目标元素
-> 光标离开目标元素
6. dragover => 拖拽元素再目标元素里面移动
-> 绑定给目标元素
7. drop => 拖拽元素再目标元素内放手
-> 绑定给目标元素
-> 必须要在 dragover 事件里面阻止默认行为
触摸事件
+ 只能再移动端使用
1. touchstart => 触摸开始
2. touchmove => 触摸移动
3. touchend => 触摸结束
其他事件
1. transitionend => 过渡结束
-> 当你有过渡属性的时候
-> 过渡结束触发, 你过渡几个属性触发多少次
2. selectstart => 开始选择
-> 当你想在页面中框选文档的时候触发
3. visibilitychange => 窗口隐藏和显示
-> 只能绑定给 document