假设现在有十个div,类名都是div1,现在给所有div都绑定同一个事件,当点击其中一个div,只有这个div里面的内容会响应事件
时间: 2024-04-15 13:30:52 浏览: 95
javascript 一个函数对同一元素的多个事件响应
要实现这个需求,您可以使用事件代理来处理。事件代理是将事件绑定在父元素上,然后通过事件冒泡来处理子元素的事件。但是在事件处理函数中,可以通过事件的 `target` 属性来判断触发事件的具体元素。
以下是一个示例代码:
```javascript
// 获取所有的 div 元素
const divs = document.querySelectorAll('.div1');
// 给父元素绑定点击事件
document.addEventListener('click', function(event) {
// 检查点击的元素是否为 div 元素
if (event.target.classList.contains('div1')) {
// 执行相应的操作,例如改变内容
event.target.innerText = 'Clicked!';
}
});
```
在这个示例中,我们首先通过 `querySelectorAll` 方法获取所有类名为 `div1` 的 div 元素,并将其存储在 `divs` 变量中。然后,我们给整个文档对象 `document` 绑定了一个点击事件。当点击事件发生时,会触发回调函数,并检查点击的元素是否包含类名为 `div1`。如果是,则执行相应的操作,例如改变内容。
这样做的好处是,无论添加多少个 div 元素,只需要绑定一个事件,只有被点击的 div 元素里面的内容会触发相应的操作。其他的 div 元素不会受到影响。
阅读全文