持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
事件
JS 里面, 事件分为几个大类
1. 鼠标事件
2. 键盘事件
3. 浏览器事件
4. 表单事件
5. 拖拽事件
6. 触摸事件(移动端)
7. 其他事件
JS 里面的所有原生事件没有大写字母
1.鼠标事件
1. click => 鼠标左键单击
2. dblclick => 鼠标左键双击
3. contextmenu => 鼠标右键单击
4. mousewheel => 滚轮滚动
5. mousedown => 鼠标按下
6. mouseup => 鼠标抬起
7. mousemove => 鼠标移动
8. mouseover => 鼠标移入
9. mouseout => 鼠标移出
10. mouseenter => 鼠标移入
11. mouseleave => 鼠标移出
2.键盘事件
不是所有元素都能触发
表单元素(有选中效果), document, window
1. keydown 键盘按下
只要是你键盘上的按键就可以触发
2. keyup 键盘抬起
3. keypress 键盘按下
必须要准确嵌入到文本框里面的内容才会触发
// 2-1. keydown
inp.onkeydown = function ()
{ console.log('键盘按下了') }；
// 2-2. keyup
inp.onkeyup = function ()
{ console.log('键盘抬起') }；
// 2-3. keypress
inp.onkeypress = function ()
{ console.log('键盘按下') }；
3.浏览器事件
1. load => 页面加载完毕
2. scroll => 滚动
3. resize => 窗口尺寸改变
4. offline => 网络断开
5. online => 网络恢复
6. hashchange => 当 hash 值改变的时候
// 3-4. offline
window.onoffline = function ()
{ console.log('没有网络了') }；
// 3-5. online
window.ononline = function ()
{ console.log('网络回覆了') }；
// 3-6. hashchange
window.onhashchange = function ()
{ console.log('哈希值改变了') }；
4.表单事件
表单事件绑定给 表单元素 和 form 标签的
1. change => 表单内容改变
2. input => 表单输入事件
3. focus => 表单聚焦事件
4. blur => 表单失焦事件
5. submit => 表单提交事件
6. reset => 表单重置事件
// 4-1. change
inp.onchange = function ()
{ console.log('表单发生变化了') }；
// 4-2. input
inp.oninput = function ()
{ console.log('输入内容') }；
// 4-3. focus
inp.onfocus = function ()
{ console.log('聚焦') }；
// 4-4. blur
inp.onblur = function ()
{ console.log('失焦') }；
// 4-5. submit
form.onsubmit = function ()
{ console.log('表单提交');
return false }；
// 4-6. reset
form.onreset = function ()
{ console.log('表单重置') }；
5.拖拽事件
一般元素想触发拖拽行为, 要给元素加一个属性
draggable="true"
需要两个元素完成一个完整的拖拽
1. 拖拽元素
- dragstart => 拖拽开始
绑定给拖拽元素的
2. drag => 拖拽移动
绑定给拖拽元素
3. dragend => 拖拽结束
绑定给拖拽元素
2. 目标元素
4. dragenter => 拖拽进入目标元素
光标进入目标元素
5. dragleave => 拖拽离开目标元素
光标离开目标元素
6. dragover => 拖拽元素再目标元素里面移动
7. drop => 拖拽元素再目标元素内放手
必须要在 dragover 事件里面阻止默认行为
// 5-1. dragstart
div.ondragstart = function ()
{ console.log('开始拖拽') }；
// 5-2. drag
div.ondrag = function ()
{ console.log('拖拽中...') }；
// 5-3. dragend
div.ondragend = function ()
{ console.log('拖拽结束') }；
// 5-4. dragenter
p.ondragenter = function ()
{ console.log('进入目标元素') }；
// 5-5. dragleave
p.ondragleave = function ()
{ console.log('离开目标元素') }；
// 5-6. dragover
p.ondragover = function (e)
{ e.preventDefault()
console.log('再目标元素内移动') }；
// 5-7. drop
p.ondrop = function ()
{ console.log('再目标元素内放手') }；
6.触摸事件
移动端使用
1. touchstart => 触摸开始
2. touchmove => 触摸移动
3. touchend => 触摸结束
// 6-1. touchstart
div.ontouchstart = function ()
{ console.log('触摸开始') }；
// 6-2. touchmove
div.ontouchmove = function ()
{ console.log('触摸移动') }；
// 6-3. touchend
div.ontouchend = function ()
{ console.log('触摸结束') }；
7.其他事件
1. transitionend => 过渡结束
当你有过渡属性的时候
过渡结束触发, 你过渡几个属性触发多少次
2. selectstart => 开始选择
当你想在页面中框选文档的时候触发
3. visibilitychange => 窗口隐藏和显示
只能绑定给 document
// 7-1 transitionend
div.ontransitionend = function ()
{ console.log('过渡结束') }；
// 7-2. selectstart
document.onselectstart = function (e)
{ e.preventDefault()
alert('请支付后复制')； }；
// 7-3. visibilitychange
document.onvisibilitychange = function ()
{ console.log('隐藏显示状态改变了') }；
以上为几种常用的事件。这里不说实战只是单纯地介绍这些事件的使用语法，具体要怎样实现功能希望大家能在自己去写一写，这样记忆的会更深刻，后续我会讲渲染，看看这些方法在实战中如何应用。
