附加到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的对象。

＆＃13;

＆＃13;

(function(){
	'use strict';

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

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

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

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

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

	}


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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题在于事件已分配，但它不知道哪个对象，this指的是实际的HTML输入而不是Input对象。

如何解决此问题？

我在网上搜索但是找不到类似的东西。最近我发现： JS objects attached to HTML elements

另外，如果你能以任何方式改进代码，请不要介意我还在学习。

提前谢谢

Answer 1

使用bind函数定义函数将使用的范围。目前，您的范围是您的元素，而不是您的类实例。

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

(function(){
	'use strict';

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

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

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

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

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

	}


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

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