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

寻求创建一个事件处理程序，该事件处理程序根据事件注册回调并进行迭代。如何在类的实例上访问事件监听器？

早期，工作的例子是这样的：

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类的实例，只是想要别人的。

来源

2012-06-28 rhodee

How should this be constructed so onclick events function as they do in the first method?

Uncaught TypeError: Object # has no method 'addEventListener'

这是obcously的原因。您需要将事件listenere添加到DOM元素，所以你可以例如做：

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

变量elt是，作为正确地评论说，私下范围的，不能从外部访问。这意味着您只需将添加过程移到构造函数中（如果元素是可确定的），或者完全放弃它。

In the method countClick what context is the nested this in? The instance of the CountMe class I suspect, just want someone else's take.

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

clickMe.countClick();

实例clickMe会的背景下，但是当功能被称为事件侦听器的DOM元素将是背景。有关this keyword的信息，请参阅MDN的概述。你可以使用一个闭包范围变量来保存对实际实例的引用，例如描述为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(); };

来源

2012-06-28 22:07:48 Bergi

我给的链接看看。我更新了我的代码示例，现在我得到以下错误：未捕获的TypeError：Object＃没有方法'addCount'。你能根据你的评论找出正确的答案吗？ – rhodee

是的，现在问题/功能是上下文是DivElement而不是CountMe实例。 – Bergi

我已经概述了可能的解决方案，但是在阅读有关问题时可能会自己找到并理解它们。 – Bergi

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

回答

相关问题