1.鼠標(biāo)事件
//點(diǎn)擊事件? ? onclick
//雙擊事件? ? ondblclick
//鼠標(biāo)右鍵點(diǎn)擊事件? ? oncontextmenu
//鼠標(biāo)進(jìn)入事件? ?
onmouseover? ? ? ? onmouseenter
//onmouseover 比 onmousenter 先執(zhí)行
//鼠標(biāo)離開(kāi)事件
onmouseout? ? ? ? onmouseleave
//onmouseout 比 onmouseleava 先執(zhí)行
注意:如果元素里面存在子元素淹魄,鼠標(biāo)在元素中移動(dòng)時(shí)郁惜,會(huì)反復(fù)觸發(fā)onmouseover和onmouseout
//鼠標(biāo)移動(dòng)事件? ? onmousedown
//鼠標(biāo)彈起事件? ? onmouseup
2.視口寬度
window.innerWidth返回視口寬度
window.innerHeight 返回視口高度
3.焦點(diǎn)事件
獲得焦點(diǎn)事件? onfocus
失去焦點(diǎn)事件? onblur
4.阻止默認(rèn)行為
e.preventDefault()
比如:阻止超鏈接跳轉(zhuǎn),阻止右鍵點(diǎn)擊事件
案例
1)拖動(dòng)框效果
dom.offsetLeft獲取元素的默認(rèn)左邊距
dom.offsetTop獲取元素的默認(rèn)上邊距
window.innerWidth? 視口寬度
window.innerHeight 視口高度
dom.offsetWidth 獲取元素可見(jiàn)高度(width+border+padding)
dom.offsetHeight獲取元素可見(jiàn)高度(height+border+padding)
e.pageX鼠標(biāo)指針到X軸坐標(biāo)
.e.pageY鼠標(biāo)指針到Y(jié)軸坐標(biāo)
2)右鍵菜單
e.target獲取具體的元素
e.preventDefault()阻止默認(rèn)行為
3)選項(xiàng)卡
classList.remove()移除樣式
classList.add()添加樣式
小游戲甲锡,購(gòu)物車兆蕉,點(diǎn)擊消失