在之前我们都是为单独的一个元素绑定事件，可是在实际应用中，我们往往需要给多个元素绑定同样的事件，如果一个个的绑定是非常繁琐的，下面就来看一下事件的批量绑定过程。
下面的案例中，我们在页面中添加了四张图片。
需求是：点击哪张图片哪张图片就放大。
首先分析一下思路：
1、为每一张图片都添加点击事件。
2、点击时，程序需要知道点击了谁。
3、调用事件函数，执行放大操作，将点击的元素放大。
下面请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>批量绑定事件</title>
</head>
<body>
<div>
<img src="img/pic1.jpg">
<img src="img/pic2.jpg">
<img src="img/pic3.jpg">
<img src="img/pic4.jpg">
</div>
<script type="text/javascript">
// 批量绑定事件
//给每个图片加上事件，以下是获取到所有图片
var imgs = document.querySelectorAll('img');
// 遍历数组
for(var i=0; i<imgs.length; i++){
//给每一个img标签绑定单击事件
// console.log(imgs[i]);
imgs[i].onclick = function(){
// 将图片放大的css代码为 width : 800px
// 事件函数中的this代表点击的那个标签
this.style.width = '800px';
}
}
</script>
</body>
</html>
以上代码大家可动手测试一下，点击哪张哪张就会放大，以上逻辑请务必掌握。
|
窥视卡
雷达卡
发表于 2023-1-25 11:56:54
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 17:12:26
