第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

懸停時高效的 JS 事件監(jiān)聽器

懸停時高效的 JS 事件監(jiān)聽器

楊__羊羊 2023-03-03 09:54:35
我編寫了以下腳本,它運(yùn)行良好。function LogoHoverAdd() {    this.classList.add("logo__container--hover");}function LogoHoverRemove() {    this.classList.remove("logo__container--hover");}var logo = document.querySelector("h1");logo.addEventListener("mouseover", LogoHoverAdd);logo.addEventListener("mouseout", LogoHoverRemove);我認(rèn)為,這種方法效率很低,因為我必須實現(xiàn)其中一些事件偵聽器。因此,我試圖通過將它放在一起或使用該ClassList Toggle功能來縮短它。不幸的是,它還沒有奏效。如何寫好這段代碼呢?
查看完整描述

1 回答

?
慕的地6264312

TA貢獻(xiàn)1817條經(jīng)驗 獲得超6個贊

很明顯,這是一個 Javascript 問題,這是一種創(chuàng)建可重用函數(shù)的方法。


function hover(element, enter, leave){

  element.addEventListener('mouseenter', enter)

  element.addEventListener('mouseleave', leave)

}

然后你可以像這樣傳遞你的元素和回調(diào)函數(shù)。


hover(document.querySelector('h1'), e => {

  // On hover

  e.target.classList.add("logo__container--hover")

}, e => {

  // On exit hover

  e.target.classList.remove("logo__container--hover")

})

您也可以通過修改懸停功能來減少代碼行數(shù)。


function hover(element, className){

  element.addEventListener('mouseenter', e => element.classList.add(className))

  element.addEventListener('mouseleave', e => element.classList.remove(className))

}

然后像這樣使用它。


hover(document.querySelector('h1'), "logo__container--hover")

您現(xiàn)在可以對多個元素可擴(kuò)展地重用它。


這是我之前的回答:正如 JHeth 提到的,改用CSS 偽類。


h1{

  /* Style when not hovering */

}


h1:hover{

  /* Style when cursor is on element */

}


查看完整回答
反對 回復(fù) 2023-03-03
  • 1 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號