如何为JavaScript中所有新Cat对象统一添加addEventListener实现点击计数

嘿，这个需求很典型，咱们完全不用手动给每个猫对象挨个绑定事件，这里有几个靠谱的实现方法：

方案一：在构造函数内直接绑定事件 #

最简单的方式就是在Cat构造函数里，创建图片后直接给它添加点击事件。这样每一个新创建的猫对象，都会自动带上点击计数的功能。注意要先把counter转成数字类型，不然会出现字符串拼接的问题：

// 修正counter的获取，转成数字类型避免字符串拼接
let counter = parseInt(document.getElementById("counter").innerHTML);

var Cat = function(name , source , width) {
  this.name = name;
  this.image = new Image(width);
  this.image.src = source;
  
  // 直接在构造函数内绑定点击事件
  this.image.addEventListener('click', () => {
    counter++;
    document.getElementById("counter").innerHTML = counter;
  });
  
  document.body.appendChild(this.image);
}

var poplinre = new Cat("Poplinre" , "images/poplinre.jpg" , 500);
var chewie = new Cat("Chewie" , "images/chewie.jpg" , 500);

方案二：使用事件委托（推荐动态场景） #

如果后续还会动态添加更多猫图片，事件委托会更高效——只需要给父元素（比如body）绑定一次事件，就能处理所有猫图片的点击：

let counter = parseInt(document.getElementById("counter").innerHTML);

var Cat = function(name , source , width) {
  this.name = name;
  this.image = new Image(width);
  this.image.src = source;
  // 给猫图片加专属类名，用来识别点击目标
  this.image.classList.add('cat-image');
  document.body.appendChild(this.image);
}

// 给body绑定事件委托，一次绑定处理所有猫图片
document.body.addEventListener('click', (e) => {
  // 判断点击的元素是不是猫图片
  if(e.target.classList.contains('cat-image')) {
    counter++;
    document.getElementById("counter").innerHTML = counter;
  }
});

var poplinre = new Cat("Poplinre" , "images/poplinre.jpg" , 500);
var chewie = new Cat("Chewie" , "images/chewie.jpg" , 500);

这种方法的优势是：哪怕之后再创建100个猫对象，也不用再写任何绑定事件的代码，自动就能触发计数。

方案三：利用原型链抽离事件逻辑 #

如果想把事件处理的逻辑和构造函数分开，保持代码整洁，可以把点击事件的绑定放到Cat的原型上：

let counter = parseInt(document.getElementById("counter").innerHTML);

var Cat = function(name , source , width) {
  this.name = name;
  this.image = new Image(width);
  this.image.src = source;
  document.body.appendChild(this.image);
  
  // 调用原型上的绑定方法
  this.bindClickHandler();
}

// 在原型上定义绑定方法，统一管理事件逻辑
Cat.prototype.bindClickHandler = function() {
  this.image.addEventListener('click', () => {
    counter++;
    document.getElementById("counter").innerHTML = counter;
  });
}

var poplinre = new Cat("Poplinre" , "images/poplinre.jpg" , 500);
var chewie = new Cat("Chewie" , "images/chewie.jpg" , 500);

这种方式适合后续需要扩展事件逻辑的场景，比如要修改点击行为时，只需要修改原型上的方法即可。

内容的提问来源于stack exchange，提问作者Fariman Kashani