在dom元素中使用原型javascript

Question

忘记了我在原始片段中的初始拼写错误，这是我想要做的：

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

假设：

function MyProto(){
this.valeur = "toto";
}
MyProto.prototype = {
func1: function() {
var t = document.createTextNode("func1 called ");
document.body.appendChild(t);
var br = document.createElement("br");
document.body.appendChild(br);        
this.func2();
},
func2: function() {
var t = document.createTextNode("func2 called");
document.body.appendChild(t);
}
};
var proto = new MyProto();
document.getElementById("myButton").addEventListener("click",proto.func1);

<button id="myButton">Press here</button>

在这个例子中，当我按下按钮时，它会抛出this.func2不是一个函数。我必须提到的是，Dom元素最终将由HtmlHelper从Asp.NetMVC生成。

Answer 1

第一个问题

这只是一个拼写错误，您调用的是funct1而不是func1

第二个问题(更新(

问题在于，当您以自己的方式添加侦听器时：.addEventListener("click",proto.func1)

this将是单击的元素，而不是您的proto实例，为了解决这个问题，您可以将其封装在另一个函数子句中，如下面的代码片段。

function MyProto() {
this.valeur = "toto";
}
MyProto.prototype = {
func1: function() {
var t = document.createTextNode("func1 called ");
document.body.appendChild(t);
var br = document.createElement("br");
document.body.appendChild(br);
this.func2();
},
func2: function() {
var t = document.createTextNode("func2 called");
document.body.appendChild(t);
}
};
var proto = new MyProto();
document.getElementById("myButton2").addEventListener("click", function() {
proto.func1()
});

<button id="myButton1" onclick="proto.func1()">First Button</button>
<button id="myButton2">Second Button</button>

Answer 2

回答初始问题：修复拼写错误适用于内联事件

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

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

function MyProto(){
this.valeur = "toto";
}
MyProto.prototype = {
func1: function() {
var t = document.createTextNode("func1 called ");
document.body.appendChild(t);
var br = document.createElement("br");
document.body.appendChild(br);   
console.log(this)
this.func2();
},
func2: function() {
var t = document.createTextNode("func2 called");
document.body.appendChild(t);
}
};
var proto = new MyProto();
document.getElementById("myButton1")
.addEventListener("click",() => proto.func1() )

.as-console-wrapper {
height: 125px;
opacity: 0.3;
}

<button type="button" id="myButton1">addEventListener now works</button>
<hr/>

尝试在函数中使用addEventlListenerWITHOUT包装时，如何保留原型this。

注意按钮2显示了我编写的代码，OP现在将其用于后续问题

function MyProto(){
this.valeur = "toto";
}
MyProto.prototype = {
func1: function() {
var t = document.createTextNode("func1 called ");
document.body.appendChild(t);
var br = document.createElement("br");
document.body.appendChild(br);   
console.log(this)
this.func2();
},
func2: function() {
var t = document.createTextNode("func2 called");
document.body.appendChild(t);
}
};
var proto = new MyProto();
document.getElementById("myButton2").addEventListener("click",proto.func1)
document.getElementById("myButton3").addEventListener("click", proto.func1.bind(proto))

.as-console-wrapper {
height: 125px;
opacity: 0.3;
}

<button type="button" id="myButton1" onclick="proto.func1()">Here <i>this</i> is the prototype</button>
<button type="button" id="myButton2">addEventListener has unexpected <i>this</i></button>
<button type="button" id="myButton3">addEventListener bound <i>this</i></button>
<hr/>