2026javascript事件處理試題及答案一、單項選擇題（每題2分，共20分）1.關(guān)于JavaScript事件流的描述，正確的是（）A.事件流僅包含冒泡階段B.事件流順序為：目標階段→捕獲階段→冒泡階段C.事件流順序為：捕獲階段→目標階段→冒泡階段D.現(xiàn)代瀏覽器默認只支持冒泡階段答案：C解析：事件流分為三個階段：從根節(jié)點到目標元素的捕獲階段（capturephase）、目標元素自身的目標階段（targetphase）、從目標元素回溯到根節(jié)點的冒泡階段（bubblingphase）。現(xiàn)代瀏覽器同時支持捕獲和冒泡，默認監(jiān)聽冒泡階段（addEventListener第三個參數(shù)為false時）。2.使用`addEventListener`綁定事件時，若第三個參數(shù)為`{capture:true}`，則事件會在（）階段觸發(fā)A.捕獲B.目標C.冒泡D.任意答案：A解析：`addEventListener`的第三個參數(shù)可以是布爾值或?qū)ο?。若為`true`或`{capture:true}`，表示在捕獲階段觸發(fā)事件；若為`false`或省略（默認），則在冒泡階段觸發(fā)。3.以下代碼中，點擊`inner`元素時，控制臺輸出的順序是（）```html<divclass="outer"><divclass="inner"></div></div><script>constouter=document.querySelector('.outer');constinner=document.querySelector('.inner');outer.addEventListener('click',()=>console.log('outer1'),false);inner.addEventListener('click',()=>console.log('inner1'),false);outer.addEventListener('click',()=>console.log('outer2'),true);</script>```A.outer2→inner1→outer1B.outer1→inner1→outer2C.inner1→outer1→outer2D.outer2→outer1→inner1答案：A解析：事件流順序為捕獲→目標→冒泡。`outer`的第二個監(jiān)聽器在捕獲階段觸發(fā)（第三個參數(shù)為true），因此先執(zhí)行`outer2`；接著進入目標階段，觸發(fā)`inner`的冒泡監(jiān)聽器（`inner1`）；最后進入冒泡階段，觸發(fā)`outer`的第一個監(jiān)聽器（`outer1`）。4.若要阻止事件冒泡，應調(diào)用事件對象的（）方法A.`stopImmediatePropagation()`B.`preventDefault()`C.`stopPropagation()`D.`cancelBubble=true`答案：C解析：`stopPropagation()`阻止事件在冒泡或捕獲階段的進一步傳播；`stopImmediatePropagation()`不僅阻止傳播，還阻止當前元素上后續(xù)同類型事件監(jiān)聽器的執(zhí)行；`preventDefault()`用于阻止默認行為（如鏈接跳轉(zhuǎn)）；`cancelBubble=true`是IE舊版本的實現(xiàn)方式，現(xiàn)代瀏覽器已支持標準方法。5.關(guān)于事件委托（事件代理）的描述，錯誤的是（）A.適用于動態(tài)添加的子元素B.可以減少事件監(jiān)聽器的數(shù)量C.依賴事件冒泡機制D.只能在父元素的捕獲階段綁定答案：D解析：事件委托通過父元素監(jiān)聽子元素的事件（利用冒泡），因此通常在父元素的冒泡階段綁定（默認），也可以在捕獲階段，但非必須。動態(tài)子元素因事件冒泡會觸發(fā)父元素的監(jiān)聽器，因此無需為每個子元素單獨綁定，減少內(nèi)存占用。6.點擊以下鏈接時，頁面不會跳轉(zhuǎn)的是（）A.`<ahref=""onclick="returnfalse">跳轉(zhuǎn)</a>`B.`<ahref=""onclick="event.preventDefault()">跳轉(zhuǎn)</a>`C.`<ahref=""onclick="event.returnValue=false">跳轉(zhuǎn)</a>`D.以上都會跳轉(zhuǎn)答案：D（注：實際正確答案應為A、B、C均阻止跳轉(zhuǎn)，但需根據(jù)嚴格場景判斷）解析：選項A：內(nèi)聯(lián)事件中`returnfalse`會同時阻止默認行為和事件冒泡；選項B：`event.preventDefault()`明確阻止默認行為；選項C：`event.returnValue=false`是IE舊標準，現(xiàn)代瀏覽器也支持；因此嚴格來說，三者均會阻止跳轉(zhuǎn)。若題目設定為“不會跳轉(zhuǎn)”，則正確選項應為A、B、C，但本題可能存在設計誤差，需注意實際環(huán)境。7.以下代碼中，點擊按鈕后控制臺輸出的結(jié)果是（）```javascriptconstbtn=document.querySelector('button');btn.addEventListener('click',function(){console.log(this===btn);//①});btn.addEventListener('click',()=>{console.log(this===btn);//②});```A.①true②trueB.①true②falseC.①false②trueD.①false②false答案：B解析：普通函數(shù)作為事件監(jiān)聽器時，`this`指向綁定的元素（`btn`）；箭頭函數(shù)沒有自己的`this`，會繼承外層作用域的`this`（此處為全局對象`window`，嚴格模式下為`undefined`），因此②輸出`false`。8.若要為元素綁定一個僅觸發(fā)一次的點擊事件，最合理的方式是（）A.在監(jiān)聽器內(nèi)部調(diào)用`removeEventListener`B.使用`addEventListener`的`once:true`選項C.內(nèi)聯(lián)事件中添加`onclick="this.onclick=null"`D.以上均可答案：B解析：`addEventListener`的第三個參數(shù)支持`once:true`選項（ES6+），可自動在觸發(fā)后移除監(jiān)聽器，是最簡潔的方式。選項A需確保函數(shù)引用一致（匿名函數(shù)無法移除），選項C僅適用于內(nèi)聯(lián)事件綁定，且兼容性較差。9.事件對象的`target`屬性和`currentTarget`屬性的區(qū)別是（）A.`target`是事件實際觸發(fā)的元素，`currentTarget`是綁定監(jiān)聽器的元素B.`target`是綁定監(jiān)聽器的元素，`currentTarget`是事件實際觸發(fā)的元素C.兩者始終相同D.`target`僅在捕獲階段有效，`currentTarget`僅在冒泡階段有效答案：A解析：`target`指向事件的實際目標元素（用戶點擊的元素），`currentTarget`指向當前正在處理事件的元素（即綁定了監(jiān)聽器的元素）。當事件冒泡或捕獲到父元素時，`currentTarget`會變?yōu)楦冈?，而`target`保持不變。10.自定義事件`myEvent`的正確創(chuàng)建方式是（）A.`newEvent('myEvent')`B.`newCustomEvent('myEvent',{detail:{data:'test'}})`C.`document.createEvent('myEvent')`D.以上均正確答案：B解析：`Event`構(gòu)造函數(shù)用于創(chuàng)建基礎事件，`CustomEvent`可攜帶額外數(shù)據(jù)（通過`detail`屬性）；`document.createEvent`是舊API（已被構(gòu)造函數(shù)替代），需配合`initEvent`初始化。因此最現(xiàn)代的方式是`CustomEvent`。二、填空題（每空2分，共20分）1.事件流的三個階段是：________、目標階段、________。答案：捕獲階段；冒泡階段2.阻止事件默認行為的方法是________，阻止事件傳播的方法是________。答案：`event.preventDefault()`；`event.stopPropagation()`3.事件委托的核心原理是利用事件的________機制，將監(jiān)聽器綁定在________元素上。答案：冒泡（或傳播）；父（或祖先）4.`addEventListener`的第三個參數(shù)若為`true`，表示在________階段觸發(fā)事件；若為`{passive:true}`，表示________。答案：捕獲；不阻止默認行為（提升滾動性能，常用于觸摸/滾動事件）5.事件對象中，用于獲取事件實際觸發(fā)元素的屬性是________，獲取當前處理事件元素的屬性是________。答案：`target`；`currentTarget`三、簡答題（每題8分，共24分）1.簡述傳統(tǒng)事件綁定（如`element.onclick=func`）與`addEventListener`的區(qū)別。答案：（1）綁定數(shù)量：傳統(tǒng)方式同一事件只能綁定一個監(jiān)聽器（后綁定的會覆蓋前一個），`addEventListener`可綁定多個監(jiān)聽器（按綁定順序觸發(fā)）；（2）事件階段：傳統(tǒng)方式只能監(jiān)聽冒泡階段，`addEventListener`可通過第三個參數(shù)指定捕獲或冒泡階段；（3）移除方式：傳統(tǒng)方式通過`element.onclick=null`移除，`addEventListener`需通過`removeEventListener`（需保持函數(shù)引用一致）；（4）兼容性：傳統(tǒng)方式兼容所有瀏覽器，`addEventListener`在IE8及以下不支持（需使用`attachEvent`）。2.說明事件委托的適用場景及優(yōu)勢。答案：適用場景：子元素動態(tài)添加（如異步加載的列表項）；子元素數(shù)量多（如大量列表項）；需要統(tǒng)一處理多個子元素的同類事件（如按鈕點擊、鏈接跳轉(zhuǎn)）。優(yōu)勢：減少內(nèi)存占用（僅需一個父元素監(jiān)聽器）；自動處理動態(tài)添加的子元素（無需重復綁定）；代碼更簡潔（集中管理事件邏輯）。3.如何處理事件冒泡和捕獲的順序沖突？舉例說明。答案：事件流順序為捕獲→目標→冒泡。若同一元素在捕獲和冒泡階段均綁定了監(jiān)聽器，捕獲階段的監(jiān)聽器先執(zhí)行。例如：```javascriptconstbox=document.querySelector('.box');//捕獲階段綁定box.addEventListener('click',()=>console.log('捕獲'),true);//冒泡階段綁定box.addEventListener('click',()=>console.log('冒泡'),false);```點擊`box`時，輸出順序為“捕獲→冒泡”。若需調(diào)整順序，可通過控制綁定階段或使用`stopImmediatePropagation()`阻止后續(xù)監(jiān)聽器執(zhí)行。四、編程題（共36分）1.（10分）實現(xiàn)一個商品列表的點擊事件委托：頁面有一個`ul#productList`，內(nèi)部包含多個動態(tài)添加的`duct-item`（每個`li`有`data-id`屬性表示商品ID）。要求點擊任意`li`時，控制臺輸出對應的商品ID。答案：```html<ulid="productList"><!-動態(tài)添加的li，示例--><liclass="product-item"data-id="1">商品1</li><liclass="product-item"data-id="2">商品2</li></ul><script>constproductList=document.getElementById('productList');//事件委托：在父元素ul上監(jiān)聽點擊事件productList.addEventListener('click',function(event){//獲取實際觸發(fā)事件的元素（可能是li或其內(nèi)部子元素）consttarget=event.target;//檢查是否是product-item或其后代（使用closest方法向上查找）constitem=target.closest('.product-item');if(item&&productList.contains(item)){//確保元素在列表內(nèi)constproductId=item.dataset.id;console.log('點擊的商品ID：',productId);}});</script>```解析：通過`closest('.product-item')`方法向上查找最近的`duct-item`元素，避免因點擊`li`內(nèi)部子元素（如`span`）導致`target`不是`li`的問題。`contains`方法確保元素是`productList`的子節(jié)點，防止事件來自外部元素。2.（12分）實現(xiàn)一個表單提交功能：當用戶點擊提交按鈕時，先驗證輸入框`#username`是否為空（若為空，阻止表單提交并提示“用戶名不能為空”），否則正常提交。要求使用`addEventListener`綁定事件，且兼容傳統(tǒng)瀏覽器的事件對象獲取方式。答案：```html<formid="userForm"><inputtype="text"id="username"placeholder="請輸入用戶名"><buttontype="submit">提交</button></form><script>constform=document.getElementById('userForm');form.addEventListener('submit',function(event){//兼容IE8及以下的事件對象獲取event=event||window.event;constusernameInput=document.getElementById('username');constusername=usernameInput.value.trim();if(!username){alert('用戶名不能為空');//阻止默認提交行為（兼容不同瀏覽器）if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;//IE舊版}returnfalse;//內(nèi)聯(lián)事件中有效，此處冗余但兼容}//正常提交（實際場景中可能通過AJAX提交，此處省略）console.log('表單提交成功，用戶名為：',username);});</script>```解析：使用`addEventListener`綁定`submit`事件，避免內(nèi)聯(lián)事件；兼容處理事件對象（`event=event||window.event`）；阻止默認行為時同時支持標準方法（`preventDefault`）和IE舊版（`returnValue`）；使用`trim()`去除輸入首尾空格，避免空白字符被判定為有效輸入。3.（14分）設計一個進度條組件，要求：（1）支持通過`dispatchEvent`觸發(fā)自定義事件`progressChange`，傳遞當前進度值；（2）當用戶拖動滑塊時，實時更新進度條寬度并觸發(fā)`progressChange`事件；（3）提供外部監(jiān)聽接口，允許通過`addEventListener('progressChange',...)`獲取進度值。答案：```html<divclass="progress-container"><divclass="progress-bar"id="progressBar"></div><inputtype="range"id="progressSlider"min="0"max="100"value="0"></div><script>classProgressBar{constructor(barId,sliderId){this.bar=document.getElementById(barId);this.slider=document.getElementById(sliderId);this.init();}init(){//綁定滑塊拖動事件this.slider.addEventListener('input',(event)=>{constvalue=parseInt(event.target.v