前端監(jiān)聽面試題及答案解析

單項選擇題（每題2分，共10題）1.以下哪種方式不能用于添加DOM事件監(jiān)聽器？A.onclick屬性B.addEventListenerC.attachEventD.onload屬性答案：D2.事件委托利用了什么原理？A.作用域鏈B.事件冒泡C.閉包D.原型鏈答案：B3.監(jiān)聽窗口大小變化的事件是？A.onresizeB.onscrollC.onclickD.onload答案：A4.阻止事件默認行為的方法是？A.stopPropagationB.preventDefaultC.returnfalseD.cancelBubble答案：B5.監(jiān)聽元素獲得焦點的事件是？A.onblurB.onfocusC.onmouseoverD.onmouseout答案：B6.以下哪個事件在頁面加載完成后觸發(fā)？A.DOMContentLoadedB.loadC.readyStateChangeD.hashchange答案：A7.監(jiān)聽鼠標滾輪事件是？A.onmousemoveB.onmousewheelC.onmousedownD.onmouseup答案：B8.若要監(jiān)聽鍵盤按下事件，使用哪個事件？A.onkeydownB.onkeyupC.onkeypressD.以上都是答案：A9.addEventListener的第三個參數(shù)為true時表示？A.捕獲階段觸發(fā)B.冒泡階段觸發(fā)C.兩者都觸發(fā)D.不觸發(fā)答案：A10.以下哪個事件可以監(jiān)聽URL中的hash值變化？A.popstateB.hashchangeC.pageshowD.pagehide答案：B多項選擇題（每題2分，共10題）1.以下屬于鼠標事件的有（）A.onclickB.onmouseenterC.onmouseleaveD.onscroll答案：ABC2.可以阻止事件傳播的方法有（）A.stopPropagationB.preventDefaultC.cancelBubbleD.returnfalse答案：AC3.頁面加載相關的事件有（）A.loadB.DOMContentLoadedC.beforeunloadD.unload答案：ABCD4.鍵盤事件包括（）A.onkeydownB.onkeyupC.onkeypressD.onfocus答案：ABC5.以下哪些是HTML5新增的事件（）A.touchstartB.orientationchangeC.resizeD.scroll答案：AB6.事件監(jiān)聽器添加方式有（）A.元素屬性方式B.addEventListenerC.attachEventD.onload答案：ABC7.能監(jiān)聽表單元素變化的事件有（）A.changeB.inputC.submitD.click答案：ABC8.以下關于事件委托說法正確的有（）A.利用事件冒泡原理B.可提高性能C.只能監(jiān)聽子元素D.可以減少事件綁定數(shù)量答案：ABD9.窗口相關事件有（）A.onresizeB.onscrollC.onfocusD.onblur答案：AB10.以下能監(jiān)聽瀏覽器前進后退的事件有（）A.popstateB.hashchangeC.pushStateD.replaceState答案：AB判斷題（每題2分，共10題）1.onclick是DOM0級事件綁定方式。（）答案：對2.addEventListener不支持IE8及以下瀏覽器。（）答案：對3.事件冒泡是從父元素向子元素傳播。（）答案：錯4.preventDefault可以阻止事件傳播。（）答案：錯5.DOMContentLoaded事件在圖片等資源加載完成后觸發(fā)。（）答案：錯6.一個元素可以同時添加多個相同類型的事件監(jiān)聽器。（）答案：對7.監(jiān)聽input元素輸入內(nèi)容變化用change事件最合適。（）答案：錯8.事件捕獲是先從最外層元素開始檢查事件。（）答案：對9.onload事件只能在window對象上使用。（）答案：錯10.利用事件委托可以監(jiān)聽動態(tài)添加的子元素事件。（）答案：對簡答題（每題5分，共4題）1.簡述事件冒泡和事件捕獲的區(qū)別。答案：事件冒泡是從內(nèi)向外，即從觸發(fā)事件的元素開始，依次向上傳播到文檔根節(jié)點；事件捕獲是從外向內(nèi)，從文檔根節(jié)點開始，依次向下檢查，直到觸發(fā)事件的元素。2.說明addEventListener三個參數(shù)的作用。答案：第一個參數(shù)是事件類型，如'click'等；第二個參數(shù)是事件處理函數(shù)；第三個參數(shù)是布爾值，為true時在捕獲階段觸發(fā)，為false（默認）在冒泡階段觸發(fā)。3.如何阻止事件的默認行為和傳播？答案：阻止默認行為用preventDefault方法（標準瀏覽器），IE低版本可用returnValue=false；阻止傳播用stopPropagation方法（標準瀏覽器），IE低版本用cancelBubble=true。4.為什么使用事件委托？答案：事件委托利用事件冒泡原理，將事件監(jiān)聽器綁定到父元素。這樣可減少事件綁定數(shù)量，提高性能，還能監(jiān)聽動態(tài)添加的子元素事件。討論題（每題5分，共4題）1.在實際項目中，如何選擇合適的事件監(jiān)聽方式？答案：考慮兼容性，舊項目兼顧IE低版本可用attachEvent等；新項目優(yōu)先addEventListener。簡單交互用元素屬性方式。事件委托用于大量相似元素監(jiān)聽以提高性能，根據(jù)具體需求和場景綜合選擇。2.說說事件監(jiān)聽在前端性能優(yōu)化方面的影響。答案：過多事件監(jiān)聽會占用資源影響性能。合理使用事件委托可減少事件綁定數(shù)，提高性能。避免不必要的事件監(jiān)聽，在合適時機添加和移除監(jiān)聽器，如頁面加載完成后添加、卸載前移除。3.討論不同瀏覽器對事件監(jiān)聽的支持差異及解決方案。答案：IE8及以下不支持addEventListener，用attachEvent。阻止事件傳播和默認行為方法也有差異。解決方案是使用封裝好的庫如jQuery統(tǒng)