Как получить доступ к целевому элементу DOM в рамках функции, когда (это) было привязано к объекту?

Question

Я некоторое время пытался найти, но ничего не смог найти. возможно, он не был правильно сформулирован, но, тем не менее, вот пример кода ниже.

class MyClass {
   constructor(){
      this.list = $('li.someClass');
      this.runEvents();
   }

   runEvents() {
      this.list.on('mouseover', this.getSomeProperty.bind(this));
   }

   getSomeProperty() {
      // how do i get the specific element now that this points to the instance of MyClass?
       var attribute = $(this).data('someAttr');
   }
}

Надеюсь, что вышеприведенное имеет смысл. Любая помощь в указании меня в правильном направлении будет принята с благодарностью.

Answer 1

После того, как функция была связана, невозможно вернуть ее оригинальный this обратно в обработчик событий. Но вы можете проверить параметр event и посмотреть на event.currentTarget, чтобы получить элемент, который вызвал слушателя:

getSomeProperty(event) {
  const list = event.currentTarget;
  const attribute = $(list).data('someAttr');
}

(.currentTarget также будет .target, если li.someClass является самым внутренним элементом элемента, по которому щелкнули, но если у него есть потомок, такой как <span>, и щелчок по промежутку, цель будет ссылаться на промежуток, а не на li. Чем больше currentTarget надежный, поскольку относится к элементу, к которому прикреплен слушатель, а не к внутреннему элементу, к которому было отправлено событие.)

Answer 2

Вы можете получить текущее событие в event.target. И вам не нужно связывать, если вы используете лямбда-нотацию.

class MyClass {
  constructor() {
    this.list = $("li");
    this.runEvents();
  }

  runEvents() {
    this.list.on("mouseover", this.getSomeProperty);
  }

  getSomeProperty = (event) => {
    console.log(event.target);
    console.log(this.list);
    console.log($(event.target).data("attr"));
  };
}
new MyClass();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>Tests 1</li>
    <li>Tests 2</li>
</ul>