JavaScript 常用事件大全

Posted 2021-09-12 CN-浮幻

目录

事件

1. 鼠标事件

2. 键盘事件

3. 触摸事件

4. 表单事件

5. 过渡事件

6. 动画事件

事件对象

1. 事件对象

2. 鼠标事件对象

3. 键盘事件对象

4. 触摸事件对象

---

事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

注意：事件名称大小写敏感。若是事件监听方式，则在事件名的前面取消on。 

1. 鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
oncontextmenu	鼠标点击右键触发
ondblclick	鼠标双击触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

 给btn按钮添加点击事件，点击弹出 你好！

let btn = document.querySelector('button')
btn.onclick = function() {
    alert('你好！')
}

2. 键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等

键盘按键被松开时触发，弹出 你好 ！

window.onkeyup = function() {
    alert('你好！')
}

3. 触摸事件

触摸touch事件	说明
touchstart	手指触摸到一个 DOM 元素时触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

 手指触摸盒子触发

let div = document.querySelector('div')
div.ontouchstart = function() {
    alert('您触摸了盒子')
}

4. 表单事件

表单事件	触发条件
onfocus	表单获得焦点触发
onblur	表单失去焦点触发
oninput	表单每次输入触发
onchange	表单内容发生改变时触发
onselect	表单文本被选取时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

将表单内每次输入的内容打印到控制台 

let input = document.querySelector('input')
input.oninput = function() {
    console.log(this.value);
}

5. 过渡事件

过渡事件	触发条件
ontransitionend	在过渡完成时触发

6. 动画事件

动画事件	触发条件
onanimationend	在动画结束播放时触发
onanimationiteration	在动画重复播放时触发
onanimationstart	在动画开始播放时触发

事件对象

1. 事件对象

事件对象属性方法	说明
e.target	返回触发事件的对象
e.type	返回事件的类型 比如click mouseover 不带on
e.preventDefault()	该方法阻止默认事件 比如禁止页面右键
e.stopPropagation()	阻止事件冒泡

  点击按钮后打印出触发事件的对象

let btn = document.querySelector('button')
btn.onclick = function(e) {
    console.log(e.target);
}

2. 鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX	返回鼠标相对于文档页面的 X 坐标  IE9+支持
e.pageY	返回鼠标相对于文档页面的 Y 坐标  IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的 X 坐标
e.screenY	返回鼠标相对于电脑屏幕的 Y 坐标

3. 键盘事件对象

键盘事件对象	说明
e.key	返回用户按下的物理按键的值

 在页面按下 A 键后，弹出按下的物理按键的值

window.addEventListener('keyup', function(e) {
    alert(e.key)
})

 注意：key 大小写敏感

4. 触摸事件对象

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前 DOM 元素上的一个手指的一个列表
changeTouches	手指状态发生了改变的列表，从无到有，从有到无变化