在 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.Net MVC 生成。

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/>

尝试寻找如何在使用 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

Use prototype javascript in dom element

javascript

asp.net-mvc

prototypejs

第一个问题

第二个问题（更新）