给多个div设置同一个的触发事件
时间: 2024-03-27 12:38:06 浏览: 9
好的,如果您需要给多个div设置同一个触发事件,可以使用JavaScript中的事件委托机制,只需要在它们的共同的父元素上注册事件监听器即可。
以下是一个示例代码,假设您需要给所有class为box的div元素设置点击事件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>给多个div设置同一个的触发事件</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
float: left;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('click', function(event) {
if (event.target.classList.contains('box')) {
console.log('点击了div元素', event.target);
// 在这里写处理点击事件的代码
}
});
</script>
</body>
</html>
```
当您点击任何一个class为box的div元素时,事件会冒泡到它们的父元素container上,由于父元素上注册了事件监听器,因此会触发事件处理函数。在事件处理函数中,可以通过event.target来获取被点击的div元素,从而进行相应的处理。