寫在前面，總結面試題不一定是為了準備面試，更是對於自己的一種溫故知新，瞭解自己知識的熟練度和理解度
問題一覽
- mouseover和mouseenter兩個事件有什麼區別？移動端的click事件行為與PC端有什麼不同？如何屏蔽掉這個不同？Event對象中，target和currentTarget的區別？說一說什麼是事件冒泡，如何阻止事件冒泡？如何阻止默認事件？是否瞭解移動端的點擊穿透，原理及解決方法？是否瞭解事件委託？什麼是事件循環？css3中有哪些屬性可以直接影響JS中的事件？（可以講一下pointer-events和touch-action屬性嗎）
問題解答
1.mouseover和mouseenter兩個事件有什麼區別？
二者的區別是mouseenter不會冒泡（bubble）。
詳細解釋一下
當二者綁定的元素都沒有子元素時，二者的行為是一致的。但是二者內部都包含子元素時，行為就不一樣了。
在mouseover綁定的元素中，鼠標每次進入一個子元素就會觸發一次mouseover事件，而mouseenter只會觸發一次。
2.移動端的click事件行為與PC端有什麼不同？如何屏蔽掉這個不同？
移動端的click事件會延遲300ms觸發事件回調（只在部分手機瀏覽器上出現）。
為什麼會這樣？
因為手機瀏覽器中需要處理如翻頁這樣複雜的手勢。在用戶做翻頁或雙擊放大等操作時，是先將手指觸碰到屏幕（此時理應已經觸發了click事件），然後再上下移動手指，瀏覽器開發廠商為了識別這種事件，所以加入了300ms延遲的處理。
解決方法
可以引入Fastclick.js來解決這個問題。它的原理是 FastClick 在檢測到touchend事件的時候，會通過 DOM 自定義事件立即觸發一個模擬click事件，並把瀏覽器在 300 毫秒之後真正觸發的click事件阻止掉。
3.Event對象中，target和currentTarget的區別？
currentTarget是當事件遍歷DOM時，標識事件的當前目標。它總是引用事件處理程序附加到的元素，而不是event.target，event.target標識事件發生的元素。
有個簡單的驗證方法，你會在下面的例子中看到e.currentTarget一直返回的是body元素，而e.target則隨著你點擊位置的不同而變化
-
- item 1-1
- item 1-2
-
- item 2-1
- item 2-2
4.說一說什麼是事件冒泡，如何阻止事件冒泡？如何阻止默認事件？
事件冒泡是指 事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接受，然後逐級向上傳播到較為不具體的節點（文檔）。
阻止事件冒泡的方法。
調用當前事件對象的stopPropagation()方法
阻止默認事件
調用當前事件對象的preventDefault()方法
5.是否瞭解移動端的點擊穿透，原理及解決方法？
有上面click事件300ms延遲的講解，這個“點擊穿透”就能好理解一些。
點擊穿透是指在移動端，由於click事件延遲300ms觸發，那麼如果300ms內，頁面顯示變化（主要是指DOM的隱藏和顯示）的話，會出現實際點擊元素觸發了touch事件，而300ms後該位置的實際元素又被再次觸發了click事件的情況。
下面是我在網上找到的點擊穿透的現象詳細說明：
點擊穿透現象有3種：
點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失後發現觸發了按鈕下面元素的click事件。
蒙層的關閉按鈕綁定的是touch事件，而按鈕下面元素綁定的是click事件，touch事件觸發之後，蒙層消失了，300ms後這個點的click事件fire，event的target自然就是按鈕下面的元素，因為按鈕跟蒙層一起消失了。
跨頁面點擊穿透問題：如果按鈕下面恰好是一個有href屬性的a標籤，那麼頁面就會發生跳轉。
因為 a標籤跳轉默認是click事件觸發 ，所以原理和上面的完全相同。
另一種跨頁面點擊穿透問題：這次沒有mask了，直接點擊頁內按鈕跳轉至新頁，然後發現新頁面中對應位置元素的click事件被觸發了。
避免方法在上面的問題中已經說過，可以引入fastclick之類的插件來解決。
6.是否瞭解事件委託？
這道題通常情況下會有好幾種引出方式，看面試官如何帶節奏了~
比如，會問你如何給一個超長的商品列表中的每個商品綁定一個點擊事件啊？如何解決大量事件綁定造成的內存開銷問題啊？
其實，這些問題都是想確認你是否有事件委託的意識。
事件委託是指利用“事件冒泡”，只通過指定一個事件處理程序，來管理某一類型的所有事件。也就是說，當此事件處理程序被觸發時，通過當前事件對象中的target來確認究竟是在哪個元素觸發的事件，從而達到一次註冊 處理多個元素觸發事件的目的。
7.什麼是事件循環
事件循環是一個大概念，想要講透不是幾句話可以說清的。當然如果面試官問到了，他的初衷也絕對不是想讓你透徹的講解一遍，只是想確認面試者對於JS運行機制的瞭解程度。
好，我試著籠統地概括一下。
JavaScript是單線程的，“主線程”負責執行所有的同步任務，一旦所有同步任務執行完成，則立即從“任務隊列”中讀取最優先的任務放到“主線程”中執行，如此循環往復。向“任務隊列”插入的是一個個事件處理函數（確切的說是函數地址）或定時任務（setTimeout的回調）。
JavaScript 運行機制詳解：再談Event Loop
能說出JavaScript是單線程，還有任務隊列（或說“事件隊列”）的概念，基本就可以了。
8.css3中有哪些屬性可以直接影響JS中的事件？（可以講一下pointer-events和touch-action屬性嗎）
css3中有兩個屬性是可以直接影響到JS中的事件的，他們是pointer-events和touch-action。
pointer-events CSS 屬性指定在什麼情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。當該屬性值設定為none時 表示鼠標事件“穿透”該元素並且指定該元素“下面”的任何東西。
需要注意的是，如果當前元素的pointer-events屬性指定位none，但是當其後代元素的pointer-events屬性指定其他值時，鼠標事件可以指向後代元素，在這種情況下，鼠標事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。
touch-action 用於指定某個給定的區域是否允許用戶操作，以及如何響應用戶操作（比如瀏覽器自帶的划動、縮放等）。
最常見的用法是禁用元素（及其不可滾動的後代）上的所有手勢，以使用自己提供的拖放和縮放行為（如地圖或遊戲表面）。
#map { touch-action: none;}總結：現在很多框架（如Vue、React）已經將事件綁定和處理都封裝了，如果你是框架的強依賴開發者的話，很多問題你可能並不會遇到，如你幾乎不需要理解Event對象中的target。
但是話說回來，用人單位和麵試官（有水平的那種）其實希望面試者是真正掌握JavaScript這門語言，而並不是掌握某某框架的使用方法，大家應該清楚其中的不同。
閱讀更多 前端小學生 的文章
