鍵盤的事件
onkeydown 當(dāng)鍵盤按下時(shí)觸發(fā)
onkeyup 當(dāng)鍵盤抬起時(shí)觸發(fā)
如何知道按下的是哪個(gè)按鍵妇押?
每個(gè)按鍵都有編碼。
oEvent.keyCode 獲取鍵盤編碼
a 65
b 66
c 67
1 49
2 50
回刪 8
回車 13
shift 16
ctrl 17
alt 18
空格 32
del 46
← 37
↑ 38
→ 39
↓ 40
js不能使用組合按鍵的編碼伊脓。
oEvent.ctrlKey 當(dāng)ctrl按下時(shí)是true
oEvent.shiftKey 當(dāng)shift按下時(shí)是true
oEvent.altKey 當(dāng)alt按下時(shí)是true
右鍵菜單事件:
oncontextmenu (鼠標(biāo)右鍵事件)
瀏覽器自帶的一些功能是默認(rèn)事件
阻止默認(rèn)事件: return false;
只能輸入數(shù)字的 輸入框有問題 輸入法的問題
注意:輸入法的問題
輸入框中只能輸入字母:
復(fù)制文字:
另存為:
拖拽:
onmosuedown 當(dāng)鼠標(biāo)按下的時(shí)候
存儲一段小距離
onmousemove 當(dāng)鼠標(biāo)移動(dòng)的時(shí)候
改變 left top
onmouseup 當(dāng)鼠標(biāo)抬起的時(shí)候
干掉 mousemove mouseup
拖拽快的時(shí)候出事了
事件加給document
在拖拽的例子中ie8-下return false;不好使。
事件捕獲 (沒有官方的叫法帜讲。)
obj.setCapture();
把所有的瀏覽器默認(rèn)的事件都給抓住了巫橄。只能執(zhí)行我當(dāng)前這個(gè)元素的事件。
釋放捕獲
obj.releaseCapture();
事件綁定
作用:給同一個(gè)元素加同一個(gè)事件加多次窑眯。
obj.addEventListener(sEv,fn,false);
兼容:IE9+屏积,chrome,firefox
obj.attachEvent('on'+sEv,fn);
兼容:IE10-
事件流: 瀏覽器中事件的走向磅甩。
false 冒泡階段 從下往上找相同事件
true 捕獲階段 從上往下找相同事件
只有addEventListener第三個(gè)參數(shù)為true時(shí)才會(huì)觸發(fā)捕獲
事件綁定兼容寫法炊林。
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
解除事件綁定
obj.removeEventListener(sEv,fn,false);
兼容:IE9+,chrome卷要,firefox
obj.detachEvent('on'+sEv,fn);
兼容:IE10-
解除事件綁定兼容寫法渣聚。
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
解除事件綁定,解除不了匿名函數(shù)
因?yàn)閮蓚€(gè)函數(shù)不想等
因?yàn)楹瘮?shù)的真正寫法是
new Function();
往后只要加事件就加上事件綁定
***** this的錯(cuò)誤用法:
1.定時(shí)器中不能使用this
2.事件中套了一層函數(shù)
3.行間事件套了一層
4.attachEvent中不能使用this
DOM事件:
1.以DOM開頭
2.只能使用事件綁定
window.onload 頁面加載完畢
加載:css僧叉,html奕枝,js,圖片等
domReady DOM結(jié)構(gòu)加載完畢以后
doucment
DOMContentLoaded dom結(jié)構(gòu)加載完畢以后
必須綁定添加
只兼容高級瀏覽器(IE9彪标,10,chrome掷豺,ff)
IE下想兼容模擬一個(gè):
document.onreadystatechange 監(jiān)控資源加載情況
document.readyState 資源此時(shí)情況
document.readyState=='complete' dom資源加載完畢
(這個(gè)是模擬加載)
事件委托:子元素的事件可以委托給父級(父級只是相對的)
委托:那事情交給別人
1.提高性能
2.給未來元素加事件
事件源:
oEvent.srcElement 兼容ie捞烟,chrome
oEvent.target 兼容高版本瀏覽器
兼容寫法: var target=oEvent.srcElement||oEvent.target;
target.tagName==Li tagName 判斷點(diǎn)擊的元素是大寫
移入移出事件的bug
onmouseover
onmouseout bug 移到子元素身上,也算移出了
onmouseenter: 進(jìn)入了
解決onmosueover的bug
onmouseleave : 離開了
解決onmouseout的bug
在IE10下:
alert在里面移出2回
因?yàn)锽OM瀏覽器對象模型的原因
用console.log()1回