在 dom 元素中使用原型 javascript
Posted
技术标签:
【中文标题】在 dom 元素中使用原型 javascript【英文标题】:Use prototype javascript in dom element 【发布时间】:2020-03-07 07:46:09 【问题描述】:忘记了我在原始 sn-p 中的初始拼写错误,这正是我想要做的:
如何在 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 元素将由 Asp.Net MVC 中的 htmlHelper 生成。
【问题讨论】:
我已经在下面更新了我的答案,以包含您的第二个问题的解决方案 【参考方案1】:第一个问题
这只是一个错字,您调用的是funct1
而不是func1
第二个问题(更新)
问题是当您以自己的方式添加侦听器时:
.addEventListener("click",proto.func1)
this
将是被点击的元素,而不是您的 proto
实例,要解决此问题,您可以将其包装在另一个函数子句中,例如下面的 sn-p。
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>
【讨论】:
我已经知道该怎么做了。我想知道如何在没有在事件处理程序中包装 func1 的情况下调用原型中的 func2。查看我的更新答案 @mplungjan 然后你可以使用.bind() 并传递proto
。像这样:.addEventListener("click", proto.func1.bind(proto))
非常感谢你们俩。你让我免于严重的头痛:-)【参考方案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/>
尝试找到在使用 addEventlListener WITHOUT 包装函数时如何保留原型 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/>
【讨论】:
我已经更新了我的答案以包含您的第二个问题的解决方案以上是关于在 dom 元素中使用原型 javascript的主要内容,如果未能解决你的问题,请参考以下文章