JavaScript【事件委托实现排他思想】

最新推荐文章于 2023-10-31 23:46:03 发布

ForeverCodinging

最新推荐文章于 2023-10-31 23:46:03 发布

阅读量939

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_49534407/article/details/123930431

版权

JavaScript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

事件委托实现排他思想：

 <style>
    ul {
      background-color: #ccc;
    }

    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <button>添加li元素</button>
    <ul>
      <li class="active">我是第1个小li</li>
      <li>我是第2个小li</li>
      <li>我是第3个小li</li>
      <li>我是第4个小li</li>
      <li>我是第5个小li</li>
    </ul>
  </div>

  <script>
    let ul = document.querySelector('ul')
    let btn = document.querySelector('button')

    btn.addEventListener('click', function () {
      // 创建一个未来元素
      let newli = document.createElement('li')
      newli.innerText = '我是新来的'
      ul.insertBefore(newli, ul.children[0])
    })


    // 事件委托实现排他思想
    ul.addEventListener('click', function (e) {
      document.querySelector('li.active').classList.remove('active')

      if (e.target.localName == 'li') {
        e.target.classList.add('active')

      }
    })
  </script>