Как получить исходный элемент, который вызвал событие при использовании метода объекта - PullRequest
Новая
       8

Как получить исходный элемент, который вызвал событие при использовании метода объекта

0 голосов
/ 07 декабря 2018

Когда вы делаете 

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

somefunction, вызывается с this, установленным на элемент, по которому событие сработало, и вызывается с событием.Тем не менее, event.target - это не то же самое, что this.

. Это создает проблемы, если я хочу пойти на более ОО-подход и поместить somefunction в свой класс и использовать bind, или сделатьмой класс поддерживает EventListener API.Потому что в этот момент мне позвонят с this, установленным для экземпляра моего класса.Я не могу найти никакого документированного способа получить эту информацию.

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Если 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>
0 голосов
/ 07 декабря 2018

Я только что обнаружил, что объект события имеет свойство currentTarget.это именно то, что «это» установлено.Хотя не удалось найти документацию, в которой это явно сказано.

0 голосов
/ 07 декабря 2018

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>
...