Question

寻求创建一个事件处理程序来注册回调并根据事件进行迭代。

早期的工作示例是这样的：

var elt = document.getElementById("square"),
      clickCount = 0;

  // call a priviledged method with access to prviate vars from 
  // outer scope
  var count = function () {
    clickCount += 1;
    alert("you clicked me " + clickCount + " times!");
  };

  elt.addEventListener("click", count, false);

现在我想写一些我可以使用的js。这是目前的结构：

//Create a class object
function CountMe () {

 //privately scoped variables
  var clickCount = 0;

 //methods on 'class' CountMe
  this.countClick = function () {
    //who's context am I in?
    this.addCount();
    alert("you clicked me " + clickCount + " times!");
  };

  this.addCount = function() {
    clickCount += 1 
  };
};

// Create an instance of countMe class
var clickMe = new CountMe();

//Add an event listener for clicks 
document.getElementById("square").addEventListener("click", clickMe.countClick ,false)

我收到的错误是Uncaught TypeError: Object #<CountMe> has no method 'addEventListener' 给出一个像这样的html页面：

<html>
<body>
 <div style="width:50px; height:50px; background-color:red;" id="square">
 </div>
</body>
</html>

我的问题是：

如何构建这样onclick事件的功能与第一种方法相同？
在方法countClick中嵌套了什么上下文？我怀疑的CountMe类的实例，只是想让别人接受。

Answer 1

如何构建这样的onclick事件就像在第一种方法中那样起作用？

未捕获TypeError：Object＃没有方法'addEventListener'

这是理所当然的。您需要将事件侦听器添加到DOM元素，因此您可以执行以下操作：

var clickMe = new CountMe();
document.getElementById("square").addEventListener("click", clickMe.countClick, false);

如正确评论的那样，变量elt是私有范围的，无法从外部访问。这意味着你应该将add-process移动到构造函数中（如果元素是可确定的），或者根本放下它。

在方法count中嵌入哪个上下文是什么？我怀疑的CountMe类的实例，只是想让别人接受。

这取决于电话。使用您的代码

clickMe.countClick();

实例clickMe将是上下文，但是当函数作为事件侦听器调用时，DOM元素将是上下文。请参阅MDN的this keyword概述。您可以使用闭包作用域变量来保存对实际实例的引用，例如描述here（有很多问题）。

三种可能的快速解决方法：

domel.addEventListener("click", clickMe.countClick.bind(clickMe), false)
domel.addEventListner("click", function(){clickMe.countClick();}, false)
var that=this; this.countClick=function(){ that.addCount(); alert(); };

如何在类实例上访问事件监听器？

1 个答案: