react event事件

本文通过一个React组件示例,展示了在事件处理中`event.target`和`event.currentTarget`的区别。当点击“购物车(2件)”按钮时,`event.target`指的是实际被点击的元素(这里是内部的文本节点),而`event.currentTarget`则是事件处理函数绑定的元素(即按钮元素本身)。理解这两个属性的区别对于精确操控DOM和实现交互至关重要。

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

 

event.target 事件发生的元素

event.currentTarget 事件处理绑定的元素

 示例:

import React from 'react';
import style from './ShoppingCart.module.css';
import { FiShoppingCart } from "react-icons/fi";
interface Props{

}
interface State{
    isOpen : boolean;
}
class ShoppingCart extends React.Component<Props, State>{
    constructor(props: Props){
        super(props);
        this.state = {
            isOpen: false
        }
    }

    handleClick=(e)=>{
        console.log("e.target ", e.target);
        console.log("e.currentTarget ", e.currentTarget);
        
        this.setState({isOpen: !this.state.isOpen});
    }

    render(){
        return <div className={style.cartContainer}>
            <button className={style.button} 
            onClick={this.handleClick}
            >
                <FiShoppingCart/><span>购物车(2件)</span>
            </button>
            <div className={style.cartDropDown}
            style={{display: this.state.isOpen ? "block" : "none"}}
            >
                <ul>
                    <li>robot 1</li>
                    <li>robot 2</li>
                </ul>
            </div>
        </div>
    }
}
export default ShoppingCart;

从代码中可以看到给button绑定了一个click事件,在事件中我们打印下e.target和e.currentTarget。

页面是这样的

F12打开审查元素,点击"购物车(2件) "

 点击""

对比我们就能发现target和currentTarget的区别。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值