第二階段第四周第13章事件

1榆纽、事件流

1.1事件冒泡

IE的事件流叫做事件冒泡局齿,即事件開始時(shí)由嘴具體的元素接收,然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)陆赋。

1.2事件捕獲

不太具體的節(jié)點(diǎn)應(yīng)該最早接收到事件

1.3DOM事件流

事件流爆款三個(gè)階段:事件捕獲階段扛门、處于目標(biāo)階段和事件冒泡階段鸠信。

2、事件處理程序

2.1HTML事件處理程序
<input type="button" value="cliclk me" onclick="alert('Clicked')" />
2.2DOM0級(jí)事件處理程序

將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?/p>

2.3DOM2級(jí)事件處理程序

定義了兩個(gè)方法
addEventListener() 和 removeEvenListener() 所有節(jié)點(diǎn)都包含這兩個(gè)方法:接收3個(gè)參數(shù):要處理的事件名论寨、作為事件處理程序的函數(shù)和一個(gè)布爾值星立,最后這個(gè)布爾值true爽茴,表示在捕獲階段調(diào)用事件處理程序;如果false绰垂,表示在冒泡階段調(diào)用事件處理程序

2.4IE事件處理程序

attachEvent() detachEvet()

2.5跨瀏覽器的時(shí)間處理程序

3室奏、事件對(duì)象

在觸發(fā)DOM上的某個(gè)事件時(shí),會(huì)產(chǎn)生一個(gè)對(duì)象event,這個(gè)對(duì)象中包含所有與事件有關(guān)的信息劲装。包括事件的元素胧沫、事件的類型以及其他與特定事件相關(guān)的信息。

3.1DOM中的事件對(duì)象
var but = document.getLivePusherById("mybtn");
        btn.onclick = function(event){
            alert(event.type);   //"click"
        },
        btn.addEventListener("click", function(event){
            alert(event.type);  //click
        }, false)
3.2IE中的事件對(duì)象

要訪問IE中的event對(duì)象有幾種不同的方式酱畅,取決于指定事件處理程序方法琳袄。

3.3跨瀏覽器的事件對(duì)象

getEvent()江场、getTarget()纺酸、preventDefault()、stopPropagation()

4址否、事件類型

UI事件餐蔬,當(dāng)用戶于頁(yè)面上的元素交互式觸發(fā)
焦點(diǎn)事件,當(dāng)元素活的或失去焦點(diǎn)時(shí)觸發(fā)
鼠標(biāo)事件佑附,當(dāng)用戶通過鼠標(biāo)在頁(yè)面上執(zhí)行操作時(shí)觸發(fā)
滾輪事件樊诺,當(dāng)使用鼠標(biāo)滾輪時(shí)觸發(fā)
鍵盤事件,當(dāng)用戶通過剪片在頁(yè)面上執(zhí)行操作時(shí)觸發(fā)
合成事件音同,當(dāng)IME輸入字符時(shí)觸發(fā)
變動(dòng)事件词爬,當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)
變動(dòng)名稱事件,當(dāng)元素或?qū)傩悦儎?dòng)時(shí)觸發(fā)

4.1UI事件

load事件权均,當(dāng)頁(yè)面完全加載后顿膨,就會(huì)觸發(fā)window上面load事件
unload事件,這個(gè)事件在文檔完全卸載后出阿發(fā)
resize事件叽赊,當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)恋沃,就會(huì)觸發(fā)resize事件
scroll事件

4.2焦點(diǎn)事件

焦點(diǎn)事件會(huì)在頁(yè)面獲得或失去焦點(diǎn)時(shí)觸發(fā)
方法 document.hasFocus() document.activeElement屬性
blur:在元素失去焦點(diǎn)時(shí)觸發(fā)
DOMFocusIn:在元素獲得焦點(diǎn)時(shí)觸發(fā)
DOMFocusOut:在元素失去焦點(diǎn)時(shí)觸發(fā)
focus:在元素活的焦點(diǎn)時(shí)觸發(fā)
focusin:在元素活的焦點(diǎn)時(shí)觸發(fā)
focusout:在元素失去焦點(diǎn)時(shí)觸發(fā)

4.3鼠標(biāo)與滾輪事件

click:在用戶單擊主鼠標(biāo)按鈕時(shí)觸發(fā)或者按下回車鍵時(shí)觸發(fā)
dblclicl:在用戶雙擊主鼠標(biāo)時(shí)觸發(fā)
mousedown:在鼠標(biāo)按下任意鼠標(biāo)觸發(fā)
mouseenter:在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)
mouseleave:在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)
mousemove:當(dāng)鼠標(biāo)指示在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)
mouseout:在鼠標(biāo)指針位于一個(gè)元素上方,然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)
mouserover:在鼠標(biāo)指針位于一個(gè)元素外部必指,然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)囊咏。
mouseup:在用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)

4.4鍵盤與文本事件

keydown:當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)
keypress:當(dāng)用戶按下鍵盤上字符鍵時(shí)觸發(fā)
keyup:當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)

4.5復(fù)合事件
4.6變動(dòng)事件
4.7HTML5事件

contextmenu事件 beforeunload事件 DOMContentLoaded事件 readystatechange事件 pageshow事件 pagehide事件 hashchange事件

4.8設(shè)備事件
4.9觸摸與手勢(shì)事件

5、內(nèi)存和性能

5.1事件委托
5.2移除事件處理程序

6塔橡、模擬事件

6.1DOM中的事件模擬
6.2IE中的事件模擬
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末梅割,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子葛家,更是在濱河造成了極大的恐慌户辞,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惦银,死亡現(xiàn)場(chǎng)離奇詭異咆课,居然都是意外死亡末誓,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門书蚪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喇澡,“玉大人,你說我怎么就攤上這事殊校∏缇粒” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵为流,是天一觀的道長(zhǎng)呕屎。 經(jīng)常有香客問我,道長(zhǎng)敬察,這世上最難降的妖魔是什么秀睛? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮莲祸,結(jié)果婚禮上蹂安,老公的妹妹穿的比我還像新娘。我一直安慰自己锐帜,他們只是感情好田盈,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缴阎,像睡著了一般允瞧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛮拔,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天述暂,我揣著相機(jī)與錄音,去河邊找鬼语泽。 笑死贸典,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的踱卵。 我是一名探鬼主播廊驼,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼惋砂!你這毒婦竟也來了妒挎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤西饵,失蹤者是張志新(化名)和其女友劉穎酝掩,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體眷柔,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡期虾,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年原朝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镶苞。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡喳坠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出茂蚓,到底是詐尸還是另有隱情壕鹉,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布聋涨,位于F島的核電站晾浴,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏牍白。R本人自食惡果不足惜脊凰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淹朋。 院中可真熱鬧笙各,春花似錦钉答、人聲如沸础芍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)仑性。三九已至,卻和暖如春右蹦,著一層夾襖步出監(jiān)牢的瞬間诊杆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工何陆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晨汹,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓贷盲,卻偏偏與公主長(zhǎng)得像淘这,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子巩剖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344