<!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>Document</title>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
ul{
width: 100%;
display: flex;
justify-content: space-between;
}
li{
width: 15%;
height: 50px;
background-color: skyblue;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li :data-id="1">1</li>
<li :data-id="2">2</li>
<li :data-id="3">3</li>
<li :data-id="4">4</li>
<li :data-id="5">5</li>
</ul>
</body>
<script>
// 获取最外面的元素
let ul = document.querySelector('ul');
// 给最外面的盒子绑定事件
//参数e为盒子的dom参数
ul.onclick = function(e){
// e.target就是获取点击的元素的标签,nodeName就是获取标签名
// 因为获取会默认为大写,这里判断也是用的大写,因为盒子有空白的地方,得判断是否点中li标签
if(e.target.nodeName == 'LI'){
// 如果点中了li标签元素,就获取它的属性值,getAttribute()就是获取标签的属性值
// 这里我们获取的是自己设定的属性名,可以与我不一样
// 然后点击li元素就会打印属性名里的内容
console.log(e.target.getAttribute(':data-id'));
}else{
// 如果点中的空白地方,就什么也不发生
return
}
}
</script>
</html>