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