js的基礎(chǔ)知識與應(yīng)用(六)

鍵盤的事件

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回
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末当船,一起剝皮案震驚了整個(gè)濱河市题画,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌德频,老刑警劉巖苍息,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異壹置,居然都是意外死亡竞思,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門钞护,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盖喷,“玉大人,你說我怎么就攤上這事难咕】问幔” “怎么了距辆?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長暮刃。 經(jīng)常有香客問我跨算,道長,這世上最難降的妖魔是什么椭懊? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任诸蚕,我火速辦了婚禮,結(jié)果婚禮上灾搏,老公的妹妹穿的比我還像新娘挫望。我一直安慰自己,他們只是感情好狂窑,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布媳板。 她就那樣靜靜地躺著,像睡著了一般泉哈。 火紅的嫁衣襯著肌膚如雪蛉幸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天丛晦,我揣著相機(jī)與錄音奕纫,去河邊找鬼。 笑死烫沙,一個(gè)胖子當(dāng)著我的面吹牛匹层,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锌蓄,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼升筏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了瘸爽?” 一聲冷哼從身側(cè)響起您访,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剪决,沒想到半個(gè)月后灵汪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡柑潦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年享言,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渗鬼。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡担锤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乍钻,到底是詐尸還是另有隱情肛循,我是刑警寧澤铭腕,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站多糠,受9級特大地震影響累舷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜夹孔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一被盈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧搭伤,春花似錦只怎、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拍鲤,卻和暖如春贴谎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背季稳。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工擅这, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人景鼠。 一個(gè)月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓仲翎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铛漓。 傳聞我的和親對象是個(gè)殘疾皇子溯香,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,336評論 0 8
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中,最簡單直接的操作就是...
    mo默22閱讀 1,275評論 0 6
  • 大家好票渠,我是IT修真院深圳分院第01期學(xué)員逐哈,一枚正直善良的web程序員芬迄。 今天給大家分享一下问顷,修真院官網(wǎng) JS任務(wù)...
    長天_閱讀 3,975評論 0 3
  • 春節(jié)要來了,許久沒相見面的親朋好友們當(dāng)然也要見一見。 我們一家來到了遙遠(yuǎn)的親戚家,一踏入小區(qū)的大門,叔叔阿姨就耒迎...
    雨悄悄de下閱讀 157評論 2 1
  • 卡爾維諾說禀梳,一旦你放棄了某種你原以為是根本的東西杜窄,你就會(huì)發(fā)現(xiàn)你還可以放棄其他東西,以后又有許多其他東西可以放棄算途。話...
    晚霞消失之時(shí)閱讀 217評論 0 0