所以写了一个简单的脚本：
/opt/myFolder/a.txt基本上将一些HTML呈现给具有类＆＃34; target＆＃34;的div。现在，我想向function Component(renderTarget){
this.target = document.querySelector(renderTarget);
this.number = 0;
this.increment = 1;
this.goUp = function(){
this.number = this.number + this.increment;
this.render();
}
this.goDown = function(){
this.number = this.number - this.increment;
this.render();
}
this.render = function(){
this.target.innerHTML = '';
this.target.innerHTML += `
<div class="container">
<div class="number">${this.number}</div>
<div class="selector">
<div class="up"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
<div class="down"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>
</div>
</div>`;
}
this.init = function(that){
that.render();
}(this);
}
var myComponent = new Component('.target');
和.up添加一个事件监听器，并将它们绑定到组件函数。这样做的正确方法是什么？
提前致谢！
PS：我知道我可以使用.down和箭头功能等，但这仅用于测试。
编辑：Working version。这有效，但我不知道它是否是正确的做法。
答案 0 :(得分：1)
每个人和他们的阿姨都有自己的最佳实践
这将是我的方法：codepen
this.target.querySelector('.up').addEventListener('click', this.goUp)
this.target.querySelector('.down').addEventListener('click', this.goDown)
您需要在渲染完成后添加eventlisteners。除非您想要将事件附加到目标并使用自定义逻辑委派事件。
我更喜欢绑定到self / that for eventlisteners
此外，您的工作版本因多个组件而失败。知道你可以在元素上做.querySelector