javascript两个事件一个函数

Question

当检测到其中一个事件时，如何侦听单击和鼠标悬停事件运行函数？

//show image by color
function showImage(imgPath, imgText, mainImgId, element) {
  let thumb = document.getElementsByClassName("colors-li");
  for (let i = 0; i < thumb.length; i++) {
    thumb[i].classList.remove("active");
  }
  element.classList.add("active");

  let curImage = document.getElementById(mainImgId);
  curImage.src = imgPath;
  curImage.alt = imgText;
  curImage.title = imgText;
}

<div class="d-flex flex-row justify-content-center ">
  <a class="product-img" href="#"><img src="img/products/product.jpg" id="3" alt=""></a>

  <div class="color-slider ms-auto d-flex flex-column justify-content-center ">
    <div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
    <div class="swiper-container color-slides">
      <ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-gift.jpg','gift', 3, this);" onmouseover="showImage('img/products/product-gift.jpg','gift', 3, this);"><img src="img/products/product-thumb-gift.jpg" alt="gift"></li>
        <li class="colors-li active p-0 swiper-slide" onclick="showImage('img/products/product.jpg','product', 3, this);" onmouseover="showImage('img/products/product.jpg','product', 3, this);"><img src="img/products/product-thumb.jpg" alt="product"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-green.jpg','green', 3, this);" onmouseover="showImage('img/products/product-green.jpg','green', 3, this);"><img src="img/products/product-thumb-green.jpg" alt="green"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-yellow.jpg','yellow', 3, this);" onmouseover="showImage('img/products/product-yellow.jpg','yellow', 3, this);"><img src="img/products/product-thumb-yellow.jpg" alt="yellow"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-purple.jpg','purple', 3, this);" onmouseover="showImage('img/products/product-purple.jpg','purple', 3, this);"><img src="img/products/product-thumb-purple.jpg" alt="purple"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-orange.jpg','orange', 3, this);" onmouseover="showImage('img/products/product-orange.jpg','orange', 3, this);"><img src="img/products/product-thumb-orange.jpg" alt="orange"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-black.jpg','black', 3, this);" onmouseover="showImage('img/products/product-black.jpg','black', 3, this);"><img src="img/products/product-thumb-black.jpg" alt="black"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-red.jpg','red', 3, this);" onmouseover="showImage('img/products/product-red.jpg','red', 3, this);"><img src="img/products/product-thumb-red.jpg" alt="red"></li>
      </ul>
    </div>
    <div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
  </div>
</div>

请帮我减少其中一项：

    onclick="showImage('img/products/product-red.jpg','red', 3, this);"
    onmouseover="showImage('img/products/product-red.jpg','red', 3, this);"

Answer 1

我会这样做：
与Using data attributes

const cColorLi_list = document.querySelectorAll('li.colors-li')
  ;
function showImage(elmLI)
  {
  elmLI.closest('ul')
    .querySelectorAll('li.colors-li') 
    .forEach(eLI => eLI.classList.toggle('active',(elmLI===eLI)))
  let curImage = document.getElementById(elmLI.dataset.ref)
  curImage.src = elmLI.dataset.img
  curImage.alt = curImage.title = elmLI.querySelector('img').alt
  }
cColorLi_list.forEach(cLi=>
  {
  cLi.onclick=()=> showImage(cLi)
  cLi.onmouseover=()=> showImage(cLi)
  })

<div class="d-flex flex-row justify-content-center ">
  <a class="product-img" href="#">  <img src="img/products/product.jpg" id="3" alt=""></a>

  <div class="color-slider ms-auto d-flex flex-column justify-content-center ">
    <div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
    <div class="swiper-container color-slides">
      <ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-gift.jpg"   data-ref="3" >
          <img src="img/products/product-thumb-gift.jpg" alt="gift">
        </li>
        <li class="colors-li active p-0 swiper-slide" data-img="img/products/product.jpg" data-ref="3" >
          <img src="img/products/product-thumb.jpg" alt="product" >
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-green.jpg"  data-ref="3" >
          <img src="img/products/product-thumb-green.jpg" alt="green">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-yellow.jpg" data-ref="3" >
          <img src="img/products/product-thumb-yellow.jpg" alt="yellow">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-purple.jpg" data-ref="3" >
          <img src="img/products/product-thumb-purple.jpg" alt="purple">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-orange.jpg" data-ref="3" >
          <img src="img/products/product-thumb-orange.jpg" alt="orange">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-black.jpg"  data-ref="3" >
          <img src="img/products/product-thumb-black.jpg" alt="black">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-red.jpg"    data-ref="3" >
          <img src="img/products/product-thumb-red.jpg" alt="red"  >
        </li>
      </ul>
    </div>
    <div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
  </div>
</div>

javascript两个事件一个函数

javascript two events one function

javascript

jquery

onclick

onmouseover

mouseevent