HTML-элемент, прикрепленный к объекту JS

Question

Я просто немного устарел от OOJS, но я не могу окунуться в одну вещь, создав объект и элемент HTML и добавив к нему события.

Ради практики у меня была идея сделать входы, которые могут быть проверены, отредактированные и т.д ...

Вот как я называю вход и назначить ему HTML объект

var elements = document.querySelectorAll('.input-field'); 

for (var n = 0; n < elements.length; n++) { 
    var instance = new input(elements[n]); 
} 

И это фактически работы, событие присваивается

Но когда я нажимаю на входе this.element не определено, я действительно не знаю, потому что я уже построил объект с назначенным this.element.

(function(){ 
 
\t 'use strict'; 
 

 
\t var Input = function Input(elem) { 
 
\t \t this.element = elem; 
 
\t \t this.construct(); 
 
\t }; 
 

 
\t Input.prototype.Classes = { 
 
\t \t INPUT: \t 'input-field__input', 
 
\t \t LABEL: \t 'input-field__label', 
 
\t \t EDITED: 'input-field--edited', 
 
\t \t FOCUSED: 'input-field--focused' 
 
\t }; 
 

 
\t Input.prototype.onFocus_ = function(e) { 
 
\t \t this.element.classList.add(this.Classes.FOCUSED); 
 
\t }; 
 

 
\t Input.prototype.construct = function() { 
 
\t \t if(this.element) { 
 
\t \t \t this.input = this.element.querySelector('.' + this.Classes.INPUT); 
 
\t \t \t this.label = this.element.querySelector('.' + this.Classes.LABEL); 
 

 
\t \t \t if(this.input){ 
 
\t \t \t \t this.input.addEventListener('focus', this.onFocus_); 
 
\t \t \t } 
 
\t \t } 
 

 
\t } 
 

 

 
\t var elements = document.querySelectorAll('.input-field'); 
 
\t for (var n = 0; n < elements.length; n++) { 
 
\t \t var instance = new Input(elements[n]); 
 
\t } 
 
})()

<div class="input-field"> 
 
    <label class="input-field__label">Name</label> 
 
    <input type="text" name="name" class="input-field__input"> 
 
</div> 
 

 
<div class="input-field"> 
 
    <label class="input-field__label">Last</label> 
 
    <input type="text" name="last" class="input-field__input"> 
 
</div>

Проблема заключается в том, что событие назначено, но он не знает, какой объект его, this является точка фактического HTML вход не Input объекта.

Как исправить это?

Я искал в Интернете, но не мог найти ничего подобного. Ближайшие Я нашел: JS objects attached to HTML elements

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

Спасибо заранее

Answer 1

Используйте bind функцию, чтобы определить сферу ваша функция будет использовать. В настоящее время ваша область - это ваш элемент, а не ваш экземпляр класса.

this.input.addEventListener('focus', this.onFocus_.bind(this)); 

(function(){ 
 
\t 'use strict'; 
 

 
\t var Input = function Input(elem) { 
 
\t \t this.element = elem; 
 
\t \t this.construct(); 
 
\t }; 
 

 
\t Input.prototype.Classes = { 
 
\t \t INPUT: \t 'input-field__input', 
 
\t \t LABEL: \t 'input-field__label', 
 
\t \t EDITED: 'input-field--edited', 
 
\t \t FOCUSED: 'input-field--focused' 
 
\t }; 
 

 
\t Input.prototype.onFocus_ = function(e) { 
 
\t \t this.element.classList.add(this.Classes.FOCUSED); 
 
\t }; 
 

 
\t Input.prototype.construct = function() { 
 
\t \t if(this.element) { 
 
\t \t \t this.input = this.element.querySelector('.' + this.Classes.INPUT); 
 
\t \t \t this.label = this.element.querySelector('.' + this.Classes.LABEL); 
 

 
\t \t \t if(this.input){ 
 
\t \t \t \t this.input.addEventListener('focus', this.onFocus_.bind(this)); 
 
\t \t \t } 
 
\t \t } 
 

 
\t } 
 

 

 
\t var elements = document.querySelectorAll('.input-field'); 
 
\t for (var n = 0; n < elements.length; n++) { 
 
\t \t var instance = new Input(elements[n]); 
 
\t } 
 
})()

<div class="input-field"> 
 
    <label class="input-field__label">Name</label> 
 
    <input type="text" name="name" class="input-field__input"> 
 
</div> 
 

 
<div class="input-field"> 
 
    <label class="input-field__label">Last</label> 
 
    <input type="text" name="last" class="input-field__input"> 
 
</div>