附加到JS對象的HTML元素

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>