0

Изучаю чистый JS, хочу добавить методы и свойства для моих DOM элементов. В интернетах сказали, что напрямую записывать методы и свойства в DOM-элементы или их прототипы нельзя. Надо делать обертки. Я сделал примерно такую обертку для DIV элемента elem:

var wrapper= {};
wrapper.elem = document.createElement('div');
wrapper.paramenter = "none";
wrapper.hide= function(){this.elem.style.display = this.parameter};

Теперь я хочу задать для элемента обработчик события

wrapper.elem.onclick = wrapper.hide;

Но тогда this будет ссылаться на DOM элемент, а из него получить Родителя и его методы и свойства просто так не получится. Мне ранее посоветовали назначать обработчик событий через bind() функцию для привязки контекста к wrapper, но получается как-то сложно и контринтуитивно.

Как правильнее будет привязать методы и свойства к DOM-элементу и при этом корректно назначить к нему обработчик событий? Спасибо.

Igor Cheglakov
  • 411

1 Answers1

1

но получается как-то сложно и контринтуитивно.

Да нет, получается вполне нормально. На самом деле потеря контекст довольно распространенная проблема ( можете поискать вопросы на этом же сайте по этой тематике )

Вообще, лучше использовать класс в вашем случае

class Wrapper {
  constructor(elem) {
    this.elem = elem;
    this.elem.onclick = this.handleClick.bind(this);
    // Второй вариант
    // this.elem.onclick = () => this.handleClick();
  }

handleClick() {
    console.log(this);
  }
}


wrapper = new Wrapper(document.getElementById('test'));
body {
  width: 100%;
}

div {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  border-radius: 5px;
}
<div id="test"></div>
ThisMan
  • 12,261
  • Спасибо! Чтобы два раза не вставать можно уточнить: Как соотносятся понятия "конструктор" и "класс"? Я правильно понял, что класс это функция-конструктор и методы прототипа собранные вместе? – Igor Cheglakov May 02 '19 at 19:42
  • Конструктор это функция, которая будет вызвана при создании экземпляра и которая его вернет – ThisMan May 02 '19 at 20:11