事件委托:将子元素事件统一委托至父元素进行处理

不想再EM0了

已于 2024-07-01 10:46:51 修改

阅读量103

点赞数 2

文章标签： javascript 前端 reactjs

于 2024-07-01 10:46:30 首次发布

本文链接：https://blog.csdn.net/weixin_73098736/article/details/140094651

版权

import React, { useEffect } from "react";

export default function My() {
  useEffect(() => {
    //获取列表元素
    const listElement = document.getElementById("list");
    //定义点击事件处理函数
    const handleClick = (event) => {
      if (event.target.tagName === "LI") {
        console.log(`clicked ${event.target.innerHTML}`);
      }
    };
    //添加事件监听器
    listElement?.addEventListener("click", handleClick);

    //清理函数
    return () => {
      listElement?.removeEventListener("click", handleClick);
    };
  }, []);

  return (
    <div>
      <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  );
}