事件
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. 拖拽元素
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('隐藏显示状态改变了') }；
复制代码
以上为几种常用的事件。这里不说实战只是单纯地介绍这些事件的使用语法，具体要怎样实现功能希望大家能在自己去写一写，这样记忆的会更深刻，后续我会讲渲染，看看这些方法在实战中如何应用。
评论