e.target Vs e.currentTarget 区别

1.背景知识

1.1 事件冒泡 和 事件捕获

在 DOM tree 上，事件 自上而下 是 事件捕获阶段， 事件 自下而上 是 事件冒泡阶段。 如果要利用这个事件执行机制，只能 二选一。

2. Show u code!!!

html

<div onClick={handleClick}>
            <button onClick={handleBtnClick}>click</button>
        </div>

js

  // div click
    const handleClick = (e) => {
        console.log(e.currentTarget) // 在一条事件链上，绑定的事件
        console.log(111)
        console.log(e.target) // 真正触发事件的元素
    }

    // btn click
    const  handleBtnClick =(e)=>{
        // e.stopPropagation()
        console.log('*********')
        console.log(e.currentTarget) // 在一条事件链上，绑定的事件
        console.log(222)
        console.log(e.target) // 真正触发事件的元素
    }
    

3. 结果

当点击了 button, 出现了下图的结果：

4. 解释：

事件捕获： div > button ;
事件冒泡： button > div
e.target 指的是 真正触发事件 的 dom 元素
e.currentTarget 指的是 注册事件 的 dom 元素