Js查漏补缺-10

最新推荐文章于 2024-07-26 20:22:02 发布

才不是小弱鸡

最新推荐文章于 2024-07-26 20:22:02 发布

阅读量224

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_40996739/article/details/106605613

版权

本文介绍了JavaScript中的事件委托技术，通过在父元素上设置监听器以提高性能，避免多次操作DOM。同时，详细讲解了鼠标事件，包括onclick、onmouseover、onmouseout、onmousemove等，并提到了contextmenu和selectstart事件的特殊用途，以及MouseEvent对象的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x00 事件委托

当需要给多个元素设置监听器时，不给子元素设置监听器，而是给父元素设置监听器，利用冒泡事件来设置子元素的事件，这样可以减少dom的操作次数，提高程序性能。

  <div class="father">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <script>
    let ul = document.querySelector('ul');
    ul.addEventListener('click',(e) => {
        e.target.style.backgroundColor = 'aqua';
    })
  </script>

0x01 鼠标事件

onclick 点击鼠标左键触发

onmouseover 鼠标经过触发

onmouseout 鼠标离开触发

onmousemove 鼠标移动触发

onmouseup 鼠标弹起触发

onmousedown 鼠标按下触发

contextmenu 可以用来禁止鼠标右键菜单