問題一:event.preventDefault()和event.stopPropagation()的作用分別是什么,它們之間有何區別?
event.preventDefault() 方法用于取消事件的默認行為 event.stopPropagation() 方法用于停止事件的傳播,阻止它被分派到其他 Document 節點
舉個例子,當你點擊一個鏈接時,頁面會自動跳轉到鏈接所在的頁面;當你在一個子元素上點擊鼠標時,事件會向上級元素進行傳遞,也就是說所有父元素的相應事件都會被觸發。使用preventDefault()可以禁用默認行為,例如在表單上禁用submit按鈕的默認行為,從而避免表單被提交。使用stopPropagation()則可以阻止事件向父級元素進一步傳遞,例如在嵌套的元素上注冊事件時可以防止父元素的相應事件也被觸發。
問題二:基于事件委托的實現原理是什么?為什么使用事件委托可以提高性能?
事件委托就是利用事件的冒泡機制,只在父級元素注冊一個事件,通過慢慢冒泡到子元素,從而通過判斷事件源實現我們想要的效果
例如,我們有一個列表并且想在每一項上添加點擊事件,在每一項上一個一個綁定顯然會有性能問題。但是,如果我們把事件綁定到列表的父元素,而不是綁定到列表的每一個子元素上,然后根據事件源元素的不同來進行邏輯處理,實現原理是捕獲事件并判斷它的目的。這可以減少事件處理函數的數量,提高頁面性能。
問題三:什么是事件循環?如何理解單線程模型?
事件循環是JavaScript的一種執行模型,用于處理異步代碼 單線程模型表示JavaScript只有一個線程,無法同時進行多個任務處理
在JavaScript中,事件循環(Event Loop)是實現異步行為的基礎,這也是JavaScript與其他編程語言不同之處。事件循環會先執行同步代碼,然后執行異步代碼的回調函數。當執行異步回調函數時,JavaScript會將其加入到消息隊列中,然后再將同步代碼全部執行完畢。當同步代碼執行完成后,事件循環就會開始不斷地從消息隊列中取出下一個回調函數進行執行,直到隊列為空為止。
總之,學習JavaScript事件處理不僅需要了解其基礎原理,還需要了解最佳實踐和解決方案。通過研究常見的事件處理題目,可以幫助我們更好地理解和應用JavaScript語言,進而提高頁面的性能和用戶交互體驗。