如何在JavaScript中的原型中添加事件监听器？

Question

当我单击复选框时，浏览器出现错误（未捕获的TypeError：this.showCheckedNums不是函数）。

HTML源代码：

 <!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="UTF-8"> <head> </head> <body> <input type="checkbox" value="1" id="check0" name="ck" />num1 <input type="checkbox" value="2" id="check1" name="ck"/>num2 <input type="checkbox" value="4" id="check2" name="ck"/>num3 <input type="checkbox" value="8" id="check3" name="ck"/>num4 <hr /> result：<label id="ckRes">0</label> <hr /> </body> </html> <script> function ckCheck (mask,name) { this.mask = mask;//mask code this.name = name;//css selector this.temp = mask;//cache this.nodes = []; } ckCheck.prototype={ start:function () { this.nodes = document.getElementsByName(this.name); this.default(); this.addEvtLisener(); }, showCheckedNums:function(argument){ document.getElementById("ckRes").innerHTML= this.temp; }, default:function (argument) { //back to initial value for(var j = 0;j<this.nodes.length ;j++){ //init checkbox this.nodes[j].checked = this.nodes[j].value & this.mask ;//1 }; this.showCheckedNums(); }, addEvtLisener:function(){ for(var i = 0; i < this.nodes.length; i++){ this.nodes[i].addEventListener('click', function (e) { e.target.checked ? this.temp|=e.target.value:this.temp^=e.target.value; //this.temp can be accessed correctly. this.showCheckedNums(); }) } }, } var obj = new ckCheck(7,"ck") obj.start(); </script>

我是一个初学者，我不知道为什么会发生错误。我希望有人可以帮助我解释这个错误，谢谢。

Answer 1

添加.addEventListener的函数，需要将该函数绑定this对象，如下所示：

this.nodes[i].addEventListener('click', function (e) {
    e.target.checked ? this.temp|=e.target.value:this.temp^=e.target.value;
                //this.temp can be accessed correctly.
    this.showCheckedNums();
}.bind(this));

注意我添加的.bind(this) 。 有四种方法如何this是JavaScript函数来确定。 看这堂课。

更好的方法来做您想做的事情是这样的：

function onClick(e) {
    e.target.checked ? this.temp|=e.target.value:this.temp^=e.target.value;
    this.showCheckedNums();
};
var onClickBound = onClick.bind(this);
this.nodes[i].addEventListener('click', onClickBound);

Answer 2

这是没有错误的代码。

我建议您阅读this关键字，因为当您是JS初学者时，这非常令人困惑。 这里是一种解释： “ this”关键字如何工作？

 <!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="UTF-8"> <head> </head> <body> <input type="checkbox" value="1" id="check0" name="ck" />num1 <input type="checkbox" value="2" id="check1" name="ck"/>num2 <input type="checkbox" value="4" id="check2" name="ck"/>num3 <input type="checkbox" value="8" id="check3" name="ck"/>num4 <hr /> result：<label id="ckRes">0</label> <hr /> </body> </html> <script> function ckCheck (mask,name) { this.mask = mask;//mask code this.name = name;//css selector this.temp = mask;//cache this.nodes = []; } ckCheck.prototype={ start:function () { this.nodes = document.getElementsByName(this.name); this.default(); this.addEvtLisener(); }, showCheckedNums:function(argument){ document.getElementById("ckRes").innerHTML= this.temp; }, default:function (argument) { //back to initial value for(var j = 0;j<this.nodes.length ;j++){ //init checkbox this.nodes[j].checked = this.nodes[j].value & this.mask ;//1 }; this.showCheckedNums(); }, addEvtLisener:function(){ var self = this; for(var i = 0; i < this.nodes.length; i++){ self.nodes[i].addEventListener('click', function (e) { e.target.checked ? self.temp|=e.target.value:self.temp^=e.target.value; //this.temp can be accessed correctly. self.showCheckedNums(); }) } }, } var obj = new ckCheck(7,"ck") obj.start(); </script>

如何在JavaScript中的原型中添加事件监听器？

问题描述

2 个解决方案

解决方案1
0 2016-08-24 11:46:35

解决方案2
0 已采纳 2016-08-24 11:48:16

如何在JavaScript中的原型中添加事件监听器？

问题描述

2 个解决方案

解决方案1 0 2016-08-24 11:46:35

解决方案2 0 已采纳 2016-08-24 11:48:16

解决方案1
0 2016-08-24 11:46:35

解决方案2
0 已采纳 2016-08-24 11:48:16