事件分類
鼠標(biāo)事件
- click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
- 用button來區(qū)別鼠標(biāo)的按鍵
- DOM3標(biāo)準(zhǔn)規(guī)定: click事件只能監(jiān)聽左鍵, 只能通過mousedown和mouseup來判斷鼠標(biāo)鍵
- 鼠標(biāo)左鍵button = 0, 右鍵button = 2, 滑輪 button = 1
eg:
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (e) {
var event = e || window.event;
if(event.button == 2){
console.log('right');
}else if(event.button == 0){
console.log('left');
}
}
- 如何解決mousedown和click的沖突
應(yīng)用時間差去區(qū)別, click的點(diǎn)擊時間快
eg:
var div = document.getElementsByTagName('div')[0];
var key = false;
var firstTime = 0;
var lastTime = 0;
div.onclick = function() {
if(key){
console.log('click');
key = false;
}
}
div.onmousedown = function() {
firstTime = new Date().getTime();
console.log('mouseDown');
}
div.onmouseup = function() {
console.log('mouseUp');
lastTime = new Date().getTime();
if( (lastTime - firstTime) < 200){
key = true;
}
}
鍵盤事件
- keydown keyup keypress
- keydown > keypress > keyup
- keydown和keypress的區(qū)別
- keydown可以響應(yīng)任意鍵盤按鍵, keypress只可以相應(yīng)字符類鍵盤按鍵
- keypress返回ascii碼, 可以轉(zhuǎn)換成相應(yīng)字符串, charCode屬性記錄ascii, 并且keypress還可以記錄大小寫, 然而keydown不能, 但是keydown可以讀到所有按鍵, 例如上下左右, keydown只有which
文本操作事件
- input //當(dāng)文本框輸入值時觸發(fā)事件
- focus//聚焦
- blur//失焦
- change//判斷一次聚焦失焦時文本內(nèi)容是否發(fā)生變化, 變化時觸發(fā)事件
窗口操作類
- scroll//當(dāng)滾動條滾動時觸發(fā)
- load//頁面加載完畢之后執(zhí)行
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
