如何访问类实例上的事件侦听器

How Do I Access Event Listeners on an instance of class?

本文关键字：实例 事件 侦听器 何访问 访问      更新时间：2023-09-26

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

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

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

应该如何构造它，以便点击事件像在第一种方法中一样运行？

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

这就是

不知所措的原因。您需要将事件侦听器添加到 DOM 元素中，因此您可以执行以下操作：

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

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

在

方法计数中单击嵌套在哪个上下文中？我怀疑 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(); };
相关文章：