Question

我有一个cat构造函数，我想将eventListener添加到我的所有cat对象中，所以当我点击它们时，计数器会增加。我不想一个一个地手动添加事件。有没有办法将事件添加到所有新对象？感谢

var counter = 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);
}

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

Answer 1

你基本上有两个选择：

在Cat构造函数

中单独添加处理程序

function incrementCounter() {
    document.getElementById("counter").innerHTML = ++counter;
}
var Cat = function(name , source , width) {
    this.name = name;
    this.image = new Image(width);
    this.image.src = source;
    this.addEventListener("click", incrementCounter);
    document.body.appendChild(this.image);
}

使用事件委派：为您的猫图像提供一些识别特征（例如类名），并在他们被添加到的容器上有一个处理程序（{{1}在这种情况下），并将处理程序放在body上，但只有在事件通过一个猫图像时才进行增量：
```
body
```

＃2使用Element#closest，这是一个模糊的新内容，但可以在旧环境中进行填充。

实际上，在您的特定情况下，您不需要document.body.addEventListener("click", function(e) { if (e.target.closest(".cat")) { document.getElementById("counter").innerHTML = ++counter; } }); var Cat = function(name , source , width) { this.name = name; this.image = new Image(width); this.image.src = source; this.className = "cat"; document.body.appendChild(this.image); }，因为Element#closest元素不能包含后代元素，因此您只需查看{{1直接。 img是一种更通用的解决方案（也适用于此处）。

Answer 2

您可以全局侦听点击事件，并仅定位您想要的图像。这种方式称为事件委派，这个article给你一些解释。

简而言之，您在公共父节点上侦听click事件，并仅定位所需元素。在你的情况下，你必须实现类似的东西：

document.body.addEventListener('click', e => {
   if (e.target && e.target.nodeName === 'IMG' &&  e.target.classList.contains('cat')) {
       //only the image is targeted
    }
});

var Cat = function(name , source , width) {
    this.name = name;
    this.image = new Image(width);
    this.image.src = source;
    this.image.classList.add('cat'); 
    document.body.appendChild(this.image);
}

Answer 3

参见活动委派。

事件委派允许您避免添加事件侦听器特定节点;相反，事件监听器被添加到一个父级。

How JavaScript Event Delegation Works

addEventlistener到javascript中的所有新对象

3 个答案: