1. 鼠标事件
// 点击事件
onclick
// 双击事件
ondblclick
// 鼠标右键点击事件
oncontextmenu
// 鼠标进入事件
// onmouseover 比 onmouseenter 先执行
onmouseenter
onmouseover
// 鼠标离开事件
// onmouseout 比 onmouseleave 先执行
onmouseleave
onmouseout
注意:如果元素里面存在子元素,鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout
// 鼠标移动事件
onmousemove
// 鼠标按下事件
onmousedown
// 鼠标弹起事件
onmouseup
2. 视口宽高
window.innerWidth 返回视口宽度
window.innerHeight 返回视口高度
3. 焦点事件
获得焦点事件
onfocus
失去焦点事件
onblur
4. 阻止默认行为
e.preventDefault()
比如:阻止超链接跳转,阻止右键点击事件
拖动框效果
dom.offsetLeft 获取元素的默认左边距
dom.offsetTop 获取元素的默认上边距
window.innerWidth 视口宽度
window.innerHeight 视口高度
dom.offsetWidth 获取元素可见宽度(width+border+padding)
dom.offsetHeight 获取元素可见高度(height+border+padding)
e.pageX 鼠标指针到X轴坐标
e.pageY 鼠标指针到Y轴坐标
右键菜单
e.target 获取具体的元素
e.preventDefault() 阻止默认行为
选项卡
classList.remove() 移除样式
classList.add() 添加样式
5. 键盘事件
onkeydown 按键按下事件
onkeypress 按键产生字符事件
onkeyup 按键弹起事件
e.keyCode 返回按键码
注意:注册事件时要加on,触发时不需要on