如何在javascript中向原型添加事件处理程序函数？

感谢今晚早些时候帮助我完成这个小项目的所有人

我正在尝试重新编写一个简单的过程程序，这是我几周前使用OOPScript编写的。该程序是一个反应测试仪，向用户呈现一个随机形状，并测量用户点击形状和呈现速度的速度。早些时候，我终于设法在页面上显示一个随机大小和颜色的正方形。现在，我正在尝试编写一个事件处理程序函数，该函数将在单击形状时将css display属性设置为none，从而使形状消失。但是，事件处理函数不起作用，到目前为止，我已经尝试了几种不同的方法。请参见下面我的全部代码：

函数形状（）{
this.x=Math.floor（Math.random（）*1200）；
this.y=Math.floor（Math.random（）*500）；
这个.draw（）；
}
Shape.prototype.draw=函数（）{
var shapeHtml=''；
var widthAndHeight=Math.floor（Math.random（）*400）；
this.shapeElement=$（shapeHtml）；
this.shapeElement.css({
“宽度”：宽度和高度，
“高度”：宽度和高度，
职位：“相对”，
左：这个.x，
托普：这个，y
});
this.shapeElement.css({
显示：“块”
});
//下面是我试图创建一个函数，使形状在单击时消失
this.shapeElement.click（函数（）{
css（“显示”、“无”）；
});
$（“body”）.append（this.shapeElement）；
}
“严格使用”；
Shape.prototype.color=函数（）{
变量颜色='0123456789ABCDEF'。拆分（''）；
var randomColor=“#”；
对于（i=0；i<6；i++）{
RandomColor+=颜色[Math.floor（Math.random（）*16）]；
};
css（{backgroundColor:randomColor}）；
}
$（文档）.ready（函数（）{
var square=新形状（）；
正方形。画（）；
正方形。颜色（）；
})

---

您可以尝试重新播放：

this.shapeElement.click(function() {...

为了

您将在加载该元素后将其添加到DOM中。 另外，检查您的控制台，因为在事件监听器

this.shapeElement.css（“display”，“none”）

可能会给您一个错误，

在该上下文中，此

是调用事件的元素。。。我相信你可以使用：

$(this).css({"display": "none"});

---

无论何时使用

function（）{

，该函数的内部都会获得一个新的调用上下文（一个新的

this

）取决于调用方式。但在处理程序中，您不需要新的

this

值-您希望继承实例化的

形状的
this
。您可以使用箭头函数，也可以记住处理程序上的
this
引用了单击的元素：


函数形状（）{
this.x=Math.floor（Math.random（）*1200）；
this.y=Math.floor（Math.random（）*500）；
这个.draw（）；
}
Shape.prototype.draw=函数（）{
var shapeHtml=''；
var widthAndHeight=Math.floor（Math.random（）*400）；
this.shapeElement=$（shapeHtml）；
this.shapeElement.css({
“宽度”：宽度和高度，
“高度”：宽度和高度，
职位：“相对”，
左：这个.x，
托普：这个，y
});
this.shapeElement.css({
显示：“块”
});
//下面是我试图创建一个函数，使形状在单击时消失
this.shapeElement.click（函数（）{
$（this.css（“显示”、“无”）；
});
$（“body”）.append（this.shapeElement）；
}
“严格使用”；
Shape.prototype.color=函数（）{
变量颜色='0123456789ABCDEF'。拆分（''）；
var randomColor=“#”；
对于（i=0；i<6；i++）{
RandomColor+=颜色[Math.floor（Math.random（）*16）]；
};
css（{backgroundColor:randomColor}）；
}
$（文档）.ready（函数（）{
var square=新形状（）；
正方形。画（）；
正方形。颜色（）；
})

$(this).css({"display": "none"});