Question

这样做的时候

event.addeventlistener("event", somefunction, false);

somefunction被调用，其中this设置为触发事件的元素，并随事件被调用。但是，event.target与this不同。

如果我想采用更多面向对象的方法，将somefunction放入类中并使用bind，或者使我的类支持EventListener API，则会出现问题。因为到那时，将this设置为类的实例来调用我。我找不到任何记录下来的掌握该信息的方法。

Answer 1

event.target是触发事件的元素，而this是触发事件侦听器的元素。

一个例子：

在下面的脚本中，a元素具有侦听器。但是，只要您单击span内的文本，它将变成target。从目标向上，将事件分配给所有父元素。这称为事件冒泡。

var e = document.getElementById('this');
e.addEventListener('click', function(event) {
  console.log('this:  ', this);
  console.log('target:', event.target);
});

<a id="this" href="#">
  <span id="target">click me</span>
</a>

Answer 2

如果somefunction是对象的属性，并且您希望该对象在函数中是可引用的（通过this），则不能将相同的this用于触发事件的元素-无论如何，您必须从处理程序内部到函数使用默认的this。这是一种可能，请使用匿名函数，该函数从处理程序内部抓取this和事件，并使用这些参数作为参数来调用对象的方法：

const obj = {
  bar(listenerElement, event) {
    console.log('this.data: ' + this.data);
    console.log('listener element ID: ' + listenerElement.id);
    console.log('event target ID: ' + event.target.id);
  },
  data: 'data'
}

document.querySelector('#outer').addEventListener('click', function(event) {
  obj.bar(this, event);
}, false);

<div id="outer">
  <div id="inner">click me</div>
</div>

Answer 3

我刚刚发现一个事件对象具有一个currentTarget属性。这正是“ this”所要设置的。找不到任何明确表示该内容的文档。

使用对象方法时，如何获取触发事件的源元素

3 个答案: