目录
事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
注意：事件名称大小写敏感。若是事件监听方式，则在事件名的前面取消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 | 手指状态发生了改变的列表，从无到有，从有到无变化 |