在dom元素中使用原型javascript

忘记了我在原始代码片段中的初始输入错误，这里是我想要尝试的：

如何在Dom元素事件中使用原型变量

假设：

函数MyProto（）{
this.valeur=“toto”；
}
MyProto.prototype={
func1：函数（）{
var t=document.createTextNode（“调用func1”）；
文件.正文.附件（t）；
var br=document.createElement（“br”）；
document.body.appendChild（br）；
这是func2（）；
},
func2：函数（）{
var t=document.createTextNode（“调用func2”）；
文件.正文.附件（t）；
}
};
var proto=新的MyProto（）；
document.getElementById（“myButton”）.addEventListener（“单击”，proto.func1）
按此处
第一个问题
这只是一个输入错误，您调用的是
funct1
，而不是
func1

第二个问题（更新）
问题是，当您按自己的方式添加侦听器时：
.addEventListener（“单击”，proto.func1）

this
将是单击的元素，而不是您的
proto
实例。要解决此问题，您可以将其包装在另一个function子句中，如下面的代码片段


函数MyProto（）{
this.valeur=“toto”；
}
MyProto.prototype={
func1：函数（）{
var t=document.createTextNode（“调用func1”）；
文件.正文.附件（t）；
var br=document.createElement（“br”）；
document.body.appendChild（br）；
这是func2（）；
},
func2：函数（）{
var t=document.createTextNode（“调用func2”）；
文件.正文.附件（t）；
}
};
var proto=新的MyProto（）；
document.getElementById（“myButton2”）.addEventListener（“单击”，函数（）{
proto.func1（）
});
第一个按钮
第二个按钮
回答最初的问题：修复输入错误对内联事件有效

回答第二个问题-如何使用addEventListener并保留此
：

安全解决方案-在事件处理程序中的函数中包装调用：


函数MyProto（）{
this.valeur=“toto”；
}
MyProto.prototype={
func1：函数（）{
var t=document.createTextNode（“调用func1”）；
文件.正文.附件（t）；
var br=document.createElement（“br”）；
document.body.appendChild（br）；
console.log（这个）
这是func2（）；
},
func2：函数（）{
var t=document.createTextNode（“调用func2”）；
文件.正文.附件（t）；
}
};
var proto=新的MyProto（）；
document.getElementById（“myButton1”）
.addEventListener（“单击”，（）=>proto.func1（））
。作为控制台包装器{
高度：125px；
不透明度：0.3；
}
addEventListener现在可以工作了
我已经更新了下面的答案，以包含您的第二个问题的解决方案。我已经更新了我的答案，以包含您的第二个问题的解决方案。我已经知道如何做到这一点。我想知道如何在proto中调用func2，而不在事件处理程序中包装func1。查看我的更新answer@mplungjan然后您可以使用并传递
proto
。像这样：
.addEventListener（“单击”，proto.func1.bind（proto））
非常感谢你们两位。你把我从一个严重的头颅中救了出来