附加到JS对象的HTML元素 [英] HTML element attached to JS object

问题描述

我只是略显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

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

提前感谢您

推荐答案

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

这篇关于附加到JS对象的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！