面试题：React中事件对象的target和currentTarget属性有何区别

区别

target：指向触发事件的实际DOM元素。也就是说，无论事件处理函数绑定在DOM树的哪个层次，target始终是用户操作的那个具体元素。
currentTarget：指向绑定事件处理函数的那个DOM元素。当事件从触发的target开始冒泡到绑定了事件处理函数的元素时，currentTarget就是这个绑定函数的元素。

实际开发场景示例

target的适用场景：假设我们有一个列表，每个列表项都有一个删除按钮。当点击删除按钮时，我们需要知道具体点击的是哪个按钮以便执行删除操作。

import React, { useState } from 'react';

const ItemList = () => {
  const [items, setItems] = useState(['item1', 'item2', 'item3']);

  const handleDelete = (e) => {
    const targetIndex = Array.from(e.target.parentNode.children).indexOf(e.target);
    const newItems = [...items];
    newItems.splice(targetIndex, 1);
    setItems(newItems);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={handleDelete}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default ItemList;

在这个例子中，e.target指向被点击的button元素，我们可以基于此获取相关信息进行操作。 2. currentTarget的适用场景：假设我们有一个容器元素，在容器上绑定了一个点击事件，当点击容器内任何地方时，我们想知道是在哪个容器内点击的，并且不想关心具体点击的内部元素。

import React from 'react';

const Container = () => {
  const handleClick = (e) => {
    console.log('Clicked inside container:', e.currentTarget.id);
  };

  return (
    <div id="myContainer" onClick={handleClick}>
      <p>Some text inside the container</p>
      <button>Button inside container</button>
    </div>
  );
};

export default Container;

这里e.currentTarget指向绑定了点击事件的div元素，我们可以获取该容器的相关属性（如id）进行相应操作。

星途面试题库

面试题：React中事件对象的target和currentTarget属性有何区别

知识考点

面试题答案

区别

实际开发场景示例