Question

我在对象原型上设置了一个方法。我希望函数在单击按钮时运行（按钮位于dom中，ID为'step'）

GoL.prototype.step = function () { // ...

每当点击按钮时，我都会让GoL.prototype.step执行下面的代码。我如何在原型方法'step'上设置click事件？

Answer 1

只需创建GoL的实例，然后将click处理程序绑定到“步骤”按钮。

var instanceOfGoL = new GoL(); // only you know how to correctly initialize this
var button = document.getElementById('step');
button.addEventListener('click', function () {
    instanceOfGoL.step();
});

您需要将其包装在函数中并使用.call()，因为事件处理程序会删除范围的成员函数，您需要将其填充回来。

没有必要提供proto函数的代码，你的问题与它没有关系。

Answer 2

Codey在评论中提出了一个很好的观点。

我正在努力想出把它放在我的代码中的位置。

最佳位置是在定义DOM交互的文件/对象中，负责获取/设置DOM值并对用户输入作出反应。

这是因为当您计划更改UI或决定更改/使用像jQuery这样的库并且需要重新考虑此代码时，您知道在哪里可以找到DOM依赖代码。

当元素存在时，您只能获取元素并添加/设置事件处理程序，因此尝试在代码中设置事件处理程序并立即运行并添加到<head>部分中将不起作用。

我通常会在关闭</body>标记的正上方添加需要dom元素的代码。您可以在您感兴趣的元素之后直接添加它。

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>

在原型函数上设置单击事件

2 个答案: