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