Javascript事件
事件是鼠标或键盘的动作.如:点击,双击,移入,移出,移动,按下,弹起,获取焦点,失去焦点…
事件驱动: 监听动作 onclick ,ondblclick,onkeyup,onkeydown,onmousemove,onblur…
事件处理程序: 事件触发后所调用的函数
语法:
对象.事件驱动=事件处理程序
如:
document.onclick=function(){
}
1. 鼠标事件
鼠标事件 | 触发条件 |
---|
onclick | 鼠标点击左键触发 |
oncontextmenu | 鼠标点击右键触发 |
ondblclick | 鼠标双击触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
ondblclick | 鼠标双击触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
<script>
// 获取页面中的div
var oDiv =document.getElementById("box");
// oDiv.onclick=function(){
// console.log("点击");
// }
// oDiv.ondblclick =function(){
// console.log("双击");
// }
// oDiv.onmouseover = function(){
// console.log("移入");
// }
// oDiv.onmouseout = function(){
// console.log("移出");
// }
// oDiv.onmousemove = function(){
// console.log("移动");
// }
// oDiv.onmousedown =function(){
// console.log("按下");
// }
// oDiv.onmouseup = function(){
// console.log("弹起");
// }
</script>
2. 键盘事件
键盘事件 | 触发条件 |
---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等 |
3. 触摸事件
触摸touch事件 | 说明 |
---|
touchstart | 手指触摸到一个 DOM 元素时触发 |
touchmove | 手指在一个 DOM 元素上滑动时触发 |
touchend | 手指从一个 DOM 元素上移开时触发 |
4. 表单事件
表单事件 | 触发条件 |
---|
onfocus | 表单获得焦点触发 |
onblur | 表单失去焦点触发 |
oninput | 表单每次输入触发 |
onchange | 表单内容发生改变时触发 |
onselect | 表单文本被选取时触发 |
onreset | 表单重置时触发 |
onsubmit | 表单提交时触发 |
事件对象
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 | 返回用户按下的物理按键的值 |
window.addEventListener('keyup', function(e) {
alert(e.key)
})
4. 触摸事件对象
触摸列表 | 说明 |
---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前 DOM 元素上的一个手指的一个列表 |
changeTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |