JavaScript 常用事件大全
JavaScript事件 常用 大全
2023-09-27 14:22:48 时间
事件
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
注意:事件名称大小写敏感。若是事件监听方式,则在事件名的前面取消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)
})
相关文章
- execjs执行包含中文参数的JavaScript
- 前端开发面试题—JavaScript事件
- Java8 Nashorn实现Java调用javascript代码
- JavaScript 编写规范
- javascript 事件触发
- JavaScript进阶系列07,鼠标事件
- JavaScript的BOM编程,事件-第4章
- JavaScript之事件委托
- 《编写可测试的JavaScript代码》——导读
- 【JavaScript从入门到精通】第二课
- 解决报错 We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue.
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
- JavaScript是如何工作的:事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式!
- 如何实现JavaScript的Map和Filter函数?
- 华为OD机试 -剩余可用字符集(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 华为OD机试 - 服务依赖(JavaScript) | 机试题算法思路 【2023】
- 数据交换格式(XML与JSON)、JSON与JavaScript对象之间互转
- JavaScript(jQuery)中的事件委托
- javascript typeof 和 constructor比较