03.js的事件委派

最新推荐文章于 2024-08-27 13:38:21 发布

HdLmj

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量63

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_52563089/article/details/129739441

版权

该代码示例展示了如何使用JavaScript监听HTML列表元素的点击事件，并获取被点击元素的自定义data-id属性值。当点击列表项时，会在控制台打印对应的ID；如果点击的是空白区域，则无操作。

摘要由CSDN通过智能技术生成

<!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>