<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var btnArr = document.getElementsByTagName("button");
//2.绑定事件
for(var i=0;i<btnArr.length;i++){
//每次循环绑定一个属性，属性值为该盒子的索引值
// btnArr[i].setAttribute("index",i);
btnArr[i].index = i;
btnArr[i].onmouseover = function () {
//排他思想（干掉所有人，剩下我一个）
//排他思想是和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
// alert(this.getAttribute("index"));
alert(this.index);
}
}
//3.书写事件驱动程序
</script>
</body>
</html>
盒子索引
网友评论