附加到 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(){
	'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]);
	}
})()

<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(){
	'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>