Обертки для DOM и обработчики событий [дубликат]

95
25 ноября 2020, 23:00
На этот вопрос уже даны ответы здесь:
Потеря контекста вызова (5 ответов)
Закрыт 1 год назад.

Изучаю чистый 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-элементу и при этом корректно назначить к нему обработчик событий? Спасибо.

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