Javascript 在原型函数上设置单击事件
我在对象原型上设置了一个方法。我希望函数在单击按钮时运行（按钮位于dom中，id为“step”）Javascript 在原型函数上设置单击事件,javascript,Javascript,我在对象原型上设置了一个方法。我希望函数在单击按钮时运行（按钮位于dom中，id为“step”） 我想让GoL.prototype.step在单击按钮时执行下面的代码。如何在原型方法“步骤”上设置单击事件？只需创建GoL的实例，然后将click处理程序绑定到“步骤”按钮 您需要将其包装在函数中并使用，因为事件处理程序会剥离作用域的成员函数，您需要重新填充它 没有必要为proto函数提供代码，您的问题与它没有真正的关系。Codey在评论中提出了一个很好的观点 我正在努力找出在我的代码中应该放在哪里
我想让GoL.prototype.step在单击按钮时执行下面的代码。如何在原型方法“步骤”上设置单击事件？只需创建
GoLclick没有必要为proto函数提供代码，您的问题与它没有真正的关系。Codey在评论中提出了一个很好的观点 我正在努力找出在我的代码中应该放在哪里 最好的位置是一个文件/对象，它定义DOM交互，负责获取/设置DOM值并对用户输入做出反应 这是因为当您计划更改UI或决定更改/使用像jQuery这样的库并且需要重新考虑这些代码时，您知道在哪里可以找到依赖DOM的代码 您只能在元素存在时获取元素并向其添加/设置事件处理程序，因此尝试在立即运行并添加到
<!DOCTYPE html>
<html>
<head>
<title>Test page for DomDependent</title>
</head>
<body>
<input type="button" data-click="button was clicked" value="click me">
<input type="button" value="does not log, no data-click">
<select data-change="select value changed">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
//all code interacting with DOM should go here
var DomDependent = {
init:function(){
document.body.onclick=DomDependent.click;
//change may not bubble/propagate in <IE9
document.body.onchange=DomDependent.change;
//dynamically add element(s), because the handler is on
// document this element will still trigger the event
var txt=document.createElement("input");
txt.type="text";
//set data-change attribute because we want something
// done when it changes
txt.setAttribute("data-change","txt changed");
document.body.appendChild(txt);
},
getEvent:function(e){
//for IE
return e || window.event;
},
click:function(e){
e = DomDependent.getEvent(e);
var todo=e.target.getAttribute("data-click");
//only do something if data-click is defined (see html)
if(todo){
//You could trigger an event in a mediator object here
// in this example we use data-click to define what
// needs to be done
console.log("something needs to be done, ",
todo,"the element:",e.target);
}
},
change:function(e){
e = DomDependent.getEvent(e);
var todo=e.target.getAttribute("data-change");
//only do something if data-change is defined (see html)
if(todo){
console.log("something needs to be done, ",
todo,"the element:",e.target);
}
}
};
DomDependent.init();
</script>
</body>
</html>
DomDependent的测试页
1.
2.
3.
//所有与DOM交互的代码都应该放在这里
var-DomDependent={
init:function（）{
document.body.onclick=DomDependent.click；
//与任何其他事件处理程序一样，在绑定事件处理程序时，更改可能不会冒泡/传播，在事件处理程序内部，您可以执行instanceOfGoL.step（）
，其中instanceOfGoL
是要在其上运行方法的GoL
的实例。这就是您想要知道的吗？请存储对元素的引用，它可能会将代码减半：var el=document.getElementById（getCellId（ix，iy））。它可以使函数更有效。你也可以有一个单独的函数来计算相邻的“Live”元素的数量。完整的函数列表与你要问的问题并不相关。只需考虑函数头（<代码> Go.PrimyType =函数）（{<代码>）.instanceOfGoL.step.call（instanceOfGoL）；
相当于instanceOfGoL.step（）；
（更简单）。无需使用.call
@FelixKling no，因为它在事件处理程序中，函数的this
被设置为DOM元素。我们希望它被设置为函数期望的实例。不需要使用.call
，instanceOfGoL已经是对象的调用。这与执行window.call.setTimeout类似（window，
没错，在事件处理程序中，这指的是DOM元素。但在处理程序中，你没有使用它！当你调用像obj.func（）这样的对象方法时，在func中，这将指的是obj。如果你不相信我，就自己试试吧：）您可以在MDN文档中了解到这一点。@Codey将其放在您的DOMReady或onload处理程序中。或者放在button元素之后标记中的任何位置。虽然您确实在答案上花费了很多精力，但它似乎并没有真正解决OP的问题。问题不是关于“这个”。@FelixKling是的，再次查看代码，它是unc了解问题。现在OP想要步骤的id，但找不到任何具有名为id的成员的对象。我猜OP在使用this
时遇到了问题，因为有时候OP希望它是元素，有时候他希望它是GoL实例（假设该对象具有id
成员）
var instanceOfGoL = new GoL(); // only you know how to correctly initialize this
var button = document.getElementById('step');
button.addEventListener('click', function () {
instanceOfGoL.step();
});
<!DOCTYPE html>
<html>
<head>
<title>Test page for DomDependent</title>
</head>
<body>
<input type="button" data-click="button was clicked" value="click me">
<input type="button" value="does not log, no data-click">
<select data-change="select value changed">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
//all code interacting with DOM should go here
var DomDependent = {
init:function(){
document.body.onclick=DomDependent.click;
//change may not bubble/propagate in <IE9
document.body.onchange=DomDependent.change;
//dynamically add element(s), because the handler is on
// document this element will still trigger the event
var txt=document.createElement("input");
txt.type="text";
//set data-change attribute because we want something
// done when it changes
txt.setAttribute("data-change","txt changed");
document.body.appendChild(txt);
},
getEvent:function(e){
//for IE
return e || window.event;
},
click:function(e){
e = DomDependent.getEvent(e);
var todo=e.target.getAttribute("data-click");
//only do something if data-click is defined (see html)
if(todo){
//You could trigger an event in a mediator object here
// in this example we use data-click to define what
// needs to be done
console.log("something needs to be done, ",
todo,"the element:",e.target);
}
},
change:function(e){
e = DomDependent.getEvent(e);
var todo=e.target.getAttribute("data-change");
//only do something if data-change is defined (see html)
if(todo){
console.log("something needs to be done, ",
todo,"the element:",e.target);
}
}
};
DomDependent.init();
</script>
</body>
</html>