0

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

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

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中嵌套 this 的上下文是什么？我怀疑的类的实例CountMe，只是想要别人的。
4

1 回答 1

1

应该如何构造它以便 onclick 事件像在第一种方法中一样起作用？

未捕获的类型错误：对象 # 没有方法“addEventListener”

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

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

正如正确注释的那样，该变量elt是私有范围的，不能从外部访问。这意味着您应该将添加过程移动到构造函数中（如果元素是可确定的），或者完全删除它。

在方法 countClick 中嵌套 this 的上下文是什么？我怀疑的 CountMe 类的实例，只是想要别人的。

这取决于调用。使用您的代码

clickMe.countClick();

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

三种可能的快速修复：

  • domel.addEventListener("click", clickMe.countClick.bind(clickMe), false)
  • domel.addEventListner("click", function(){clickMe.countClick();}, false)
  • var that=this; this.countClick=function(){ that.addCount(); alert(); };
于 2012-06-28T22:07:48.910 回答