CSS hover效果和Javascript onMouseOver事件

Question

在工作中處理項目時，我被告知在 CSS class 而不是 JS function 中實現以下 JS 代碼：

function onMouseOver(e : any) {
     e.target.style.textDecoration = 'underline';
}

function onMouseLeave(e : any) {
    e.target.style.textDecoration = 'none';
}

他們兩個之間的權衡是什么，為什么他們中的一個應該比另一個更受歡迎。

簡而言之：為什么我不應該在 React 中創建 mouseOver class 而是使用 CSS class？ JS function 比 CSS hover 執行時間長嗎？

Answer 1

在可以提供交易的地方，CSS 優於 JS 的原因很簡單。

1. CSS 在運行中工作，比 Javascript 快 10 倍。
2. 事件偵聽器是函數，每次執行事件時都會調用的函數。 與 CSS 相比， :hover是默認的 HTML 屬性，可以使用 CSS 進行自定義。

tl;博士

CSS :hover 、 :focus和所有其他此類選擇器會修改默認的 HTML 行為，而 Javascript 事件偵聽器會向現有的 HTML 節點添加附加功能。 一旦可擴展性成為主題，權衡是巨大的。