本文介绍了附加到JS对象的HTML元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是略显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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！