1 JS鼠标事件

• click鼠标点击事件

事件对象.onclick=function() {}

• mousedown / mouseup 鼠标按下/松开事件

事件对象.onmousedown =function() {}

• mouseenter / mouseleave 鼠标移入/移出事件
• mouseover / mouseout 鼠标移入移出
• mousemove 鼠标移动事件
• mousewheel 滚轮滚动事件
  注：mouseover / mouseout事件支持事件冒泡， mouseenter / mouseleave 事件不支持事件冒泡

利用鼠标移入事件实现如下效果

CSS

 <style>body {background-color: #000;}.box {width: 280px;/* height: 300px; */display: flex;flex-wrap: wrap;margin: 100px auto;}.box_item {width: 10px;height: 10px;margin: 2px;background-color: #333;transition: all 0.5s;}</style>

HTML

  <div class="box"></div>

JS

<script>let box = document.querySelector('.box')let html = ''for (i = 0; i < 600; i++) {html += `<div class='box_item'></div>`}box.innerHTML = htmllet boxItemList = document.querySelectorAll('.box_item')for (i = 0; i < boxItemList.length; i++)boxItemList[i].onmouseenter = function() {let r = Math.floor(Math.random() * 255 + 1)let g = Math.floor(Math.random() * 255 + 1)let b = Math.floor(Math.random() * 255 + 1)let thisobj = thisthisobj.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'setTimeout(function() {console.log(thisobj)thisobj.style.backgroundColor = '#333'}, 500)}</script>