event.target 和 event.currentTarget 的区别

喜欢ヅ旅行 2023-06-25 02:21 17阅读 0赞

### event.target ###

> This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

### event.currentTarget ###

> Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

读定义总是很绕，要彻底了解这两者的区别，我们要先了解浏览器中事件传递的机制**冒泡**和**捕获**。

### 冒泡和捕获 ###

在页面中点击一个元素，事件是从这个元素的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。

![capturing][] ![bubbling][]

我们为一个元素绑定一个点击事件的时候，可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当`addEventListener`的第三个参数为`true`的时候，代表是在捕获阶段绑定，当第三个参数为`false`或者为空的时候，代表在冒泡阶段绑定。

知道事件有这么一个穿透的过程之后，结合下面的例子，就可以很好来理解`event.target`和`event.currentTarget`：

<div id="a">
        <div id="b">
          <div id="c">
            <div id="d"></div>
          </div>
        </div>
    </div>
    
    <script>
        document.getElementById('a').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('b').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('c').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('d').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
    </script>

上面事件的绑定都是在冒泡阶段的，当我们点击最里层的**元素d**的时候，会依次输出:

target:d&currentTarget:d
    target:d&currentTarget:c
    target:d&currentTarget:b
    target:d&currentTarget:a

从输出中我们可以看到，`event.target`指向引起触发事件的元素，而`event.currentTarget`则是事件绑定的元素，只有被点击的那个目标元素的`event.target`才会等于`event.currentTarget`。

如果我们把事件都绑定在捕获阶段，然后还是点击最里层的**元素d**，这时`event.target`还依旧会指向d，因为那是引起事件触发的元素，因为`event.currentTaget`指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下：

target:d&currentTarget:a
    target:d&currentTarget:b
    target:d&currentTarget:c
    target:d&currentTarget:d

[capturing]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3NC5zaW5haW1nLmNuL2xhcmdlLzY4MjUwYzM2Z3cxZW9mdWZyazJreGoyMGNqMGFodDh3LmpwZw?x-oss-process=image/format,png
[bubbling]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3NC5zaW5haW1nLmNuL2xhcmdlLzY4MjUwYzM2Z3cxZW9mdWZxcnMxNWoyMGNrMGFianJqLmpwZw?x-oss-process=image/format,png