第十三章 事件

1.事件流:描述的是從頁(yè)面中接收事件的順序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕獲流。


2.事件冒泡:事件開始由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收,然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)(文檔)

? ?事件捕獲:事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。


3.所有現(xiàn)代瀏覽器都支持事件冒泡。IE 5.5及更早版本中的事件冒泡會(huì)跳過<html>元素;IE9、Firefox、Chrome和Safari則將事件一直冒泡到window對(duì)象


4.“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段:事件捕獲階段、處于目標(biāo)階段和事件冒泡階段


5.事件:用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作,例如click、load;

? ?事件處理程序(事件偵聽器):響應(yīng)某個(gè)事件的函數(shù),其名字以“on”開頭,如onclick、onload


6.使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法,也就是指程序中的this引用當(dāng)前元素

var btn = document . getElementById ("myBtn") ;

btn . onclick = function(){

? ? alert(this . id) ; ? //"myBtn"

}

DOM2級(jí)事件用于處理指定和刪除事件處理程序的操作的方法:addEventListener()和removeEventListener()。addEventListener()添加的匿名函數(shù)無(wú)法移除。


7.①attachEvent()的第一個(gè)參數(shù)是"onclick",而非DOM的addEventListener()方法中的"click"。

? ?②在使用attachEvent()方法的情況下,事件處理程序會(huì)在全局作用域中運(yùn)行,this等于window

? ?③使用attachEvent()添加的事件處理程序不是以添加它們的順序執(zhí)行,而是以相反的順序被觸發(fā)


8.無(wú)論指定事件處理程序時(shí)使用什么方法(DOM0級(jí)或DOM2級(jí)),都會(huì)傳入event對(duì)象


9.在事件處理程序內(nèi)部,對(duì)象this始終等于currentTarget的值,而target則只包含事件的實(shí)際目標(biāo)


10.preventDefault()取消其默認(rèn)行為;stopPropagation()用于立即停止事件在DOM層次中的傳播


11.IE中的event對(duì)象:

①DOM0級(jí)方法添加:event對(duì)象作為window對(duì)象的一個(gè)屬性存在

②attachEvent()添加:event對(duì)象作為參數(shù)被傳入事件處理程序函數(shù)中

③HTML特性指定的:通過名叫event的變量來(lái)訪問event對(duì)象


12.load事件:當(dāng)頁(yè)面完全加載后(包括所有圖像、JavaScript文件、CSS文件等外部資源),就會(huì)觸發(fā)window上面的load事件


13.unload事件:用戶從一個(gè)頁(yè)面切換到另一個(gè)頁(yè)面,使用最多的情況是清除引用,以避免內(nèi)存泄露。


14.①新圖像元素不一定要從添加到文檔后才開始下載,只要設(shè)置了src屬性就會(huì)開始下載

? ? ?②只有設(shè)置了<script>元素的src屬性并將該元素添加到文檔后,才會(huì)開始下載JavaScript文件


15.resize事件、scroll事件中的代碼有可能被頻繁執(zhí)行,從而導(dǎo)致瀏覽器反應(yīng)明顯變慢,所以要盡量保持這兩類事件處理程序的代碼簡(jiǎn)單


16.除了mouseenter和mouseleave,所有鼠標(biāo)事件都會(huì)冒泡,也可以被取消。取消鼠標(biāo)事件的默認(rèn)行為還會(huì)影響其他事件,因?yàn)槭髽?biāo)事件與其他事件是密不可分的


17.①clientX、clientY:鼠標(biāo)指針在視口中的水平和垂直位置

? ? ?② pageX、pageY:鼠標(biāo)指針在頁(yè)面中的水平和垂直位置

③screenX、screenY:鼠標(biāo)指針在屏幕中的水平和垂直位置


18.textInput事件和keypress事件區(qū)別:

①任何可獲得焦點(diǎn)的元素都可以觸發(fā)keypress事件,但只有可編輯區(qū)域可能觸發(fā)textInput事件

②textInput事件只會(huì)在用戶按下能夠輸入實(shí)際字符的鍵時(shí)才會(huì)被觸發(fā),而keypress事件則在按下能夠影響文本顯示的鍵時(shí)也會(huì)觸發(fā)


19.load事件:在頁(yè)面中一切都加載完畢時(shí)觸發(fā),包括外部資源

DOMContentLoaded事件:形成完整的DOM樹之后觸發(fā),不理會(huì)圖像、JavaScript文件、CSS文件或其他資源是否已經(jīng)下載完畢


20.事件委托:利用事件冒泡,只指定一個(gè)事件處理程序,就可以管理某一類型。所有用到按鈕的事件(多數(shù)鼠標(biāo)事件和鍵盤事件)都適合采用事件委托技術(shù)。最適合采用事件委托技術(shù)的事件包括click、mousedown、mouseup、keydown、keyup和keypress。


21.“事件處理程序過多”問題的解決方案:

①采用事件委托技術(shù),限制建立的連接數(shù)量。

②在不需要的時(shí)候移除事件處理程序。


22.DOM中的事件模擬:

①在document對(duì)象上使用createEvent()方法創(chuàng)建event對(duì)象

②使用與事件有關(guān)的信息對(duì)其進(jìn)行初始化

③使用dispatchEvent()方法觸發(fā)事件


23.IE中的事件模擬:

①調(diào)用document.createEventObject()方法創(chuàng)建event對(duì)象

②使用與事件有關(guān)的信息對(duì)其進(jìn)行初始化

③使用fireEvent()方法觸發(fā)事件


24.在使用事件時(shí)需考慮的一些內(nèi)存與性能的問題:

①有必要限制一個(gè)頁(yè)面中事件處理程序的數(shù)量,數(shù)量太多會(huì)導(dǎo)致占用大量?jī)?nèi)存,而且會(huì)讓用戶感覺頁(yè)面反應(yīng)不夠靈敏

②建立在事件冒泡機(jī)制上的事件委托技術(shù),可以有效地減少事件處理程序的數(shù)量

③建議在瀏覽器卸載頁(yè)面之前移除頁(yè)面中的所有事件處理程序

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 事件處理程序在應(yīng)用中是必不可少的,雖然現(xiàn)在很多框架都有自己實(shí)現(xiàn)事件處理方法,但是熟知原生才能讓我們應(yīng)對(duì)各種各樣的需...
    俗三瘋閱讀 301評(píng)論 0 1
  • JavaScript 程序采用了異步事件驅(qū)動(dòng)編程模型。在這種程序設(shè)計(jì)風(fēng)格下,當(dāng)文檔、瀏覽器、元素或與之相關(guān)的對(duì)象發(fā)...
    劼哥stone閱讀 1,274評(píng)論 3 11
  • 13.1 事件流 “DOM2級(jí)事件”規(guī)定事件流包括3個(gè)階段:事件捕獲階段,處于目標(biāo)階段,事件冒泡階段。事件捕獲表示...
    Elevens_regret閱讀 448評(píng)論 0 0
  • 1)公司采購(gòu)了一套業(yè)界領(lǐng)先的知識(shí)管理產(chǎn)品,比如企明KMC(廣告)。要推廣上線,知識(shí)庫(kù)、博客、問答等功能的分類如何配...
    叫我王寶寶閱讀 1,666評(píng)論 0 6
  • “喻斯洲為你死了,他死了!”秦念似乎很是得意的喧囂著“你還有什么資格活著?你哥、喻斯洲,這個(gè)世界上在乎你的人都已經(jīng)...
    西檬可樂閱讀 294評(píng)論 1 1