HTML DOM事件

我有一個瀏覽器樹如下。每個節點都是一個帶有單獨ID的div元素。我想在鼠標懸停在節點上時更改樣式。當用戶左鍵單擊或右鍵單擊節點時執行一些操作。 enter image description here HTML DOM事件

問題1：有些文檔表示：hover選擇器存在性能問題。因此，我傾聽鼠標懸停和鼠標事件。這種方式是推薦的嗎？

爲了實現我的要求，我想要監聽每個節點的鼠標懸停，鼠標懸停，點擊和上下文菜單事件。我有兩個解決方案。首先是將事件處理程序綁定到每個節點。第二個是僅將事件處理程序綁定到根節點。當事件冒泡到根節點時，處理程序被調用。

問題2：兩種解決方案哪種性能更好？

來源

2012-09-26 Jeffrey

你爲什麼要用JS設置一個懸停效果？這不是CSS的任務，它沒有任何性能問題（至少不是沒有使用多個轉換）。 – feeela

曾聽說過CSS？ –

建議「爲IE客戶端避開非鏈接元素的懸停僞選擇器」。從這裏複製（developers.google.com/speed/docs/best-practices/rendering）。 – Jeffrey

CSS的懸停效果通常優於JavaScript，它更加原生，而且維護起來要容易得多（性能不僅限於客戶端技術，維護代碼的人員表現如何？）。

根據所使用的HTML（如果您在鏈接上使用:hover，它總是很好），有時需要在JavaScript中模擬懸停效果以支持舊版瀏覽器。

事件冒泡將比多個事件處理程序實例執行得更好。 http://icant.co.uk/sandbox/eventdelegation/

你永遠不應該使用懸停展開/然而坍塌新的內容，那只是無法訪問，展開/摺疊應始終從一個鏈接元素上的click事件觸發（它不喜歡你的聲音是，順便說一句）。

來源

2012-09-26 09:49:44

建議「爲IE客戶端避免使用非懸停元素的懸停僞選擇器」。從這裏複製（https://developers.google.com/speed/docs/best-practices/rendering）。引號：[避免使用：懸停僞選擇器，用於IE客戶端的非鏈接元素。如果您使用：懸停在非錨點元素上，請在IE7和IE8中測試頁面以確保您的頁面可用。如果您發現：hover導致性能問題，請考慮針對IE客戶端有條件地使用JavaScript onmouseover事件處理程序。 ] – Jeffrey

我知道，但我總是使用可訪問性（鍵盤/觸摸屏）的理由鏈接的可移動物品。只有您的CSS選擇器過於模糊時，性能問題纔會出現。 –

謝謝李。：懸停問題只存在於IE瀏覽器？ Chrome，Safari和Firefox怎麼樣？你碰巧知道嗎？ – Jeffrey

回答

相關問題