js 中的事件委托事件

最新推荐文章于 2024-08-09 16:54:24 发布

大闸蟹~

最新推荐文章于 2024-08-09 16:54:24 发布

阅读量140

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/ychh1/article/details/125717382

版权

javascript

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

<body>
    <ul id="list" class="list">
        <li class="item" data-index="0">
            事件委托代理演示1111
            <a href="javascript:;" class="del">删除</a>
            <a href="javascript:;" class="change">修改</a>
        </li>

        <li class="item" data-index="1">
            事件委托,事件代理演示222
            <a href="javascript:;" class="del">删除</a>
            <a href="javascript:;" class="change">修改</a>
        </li>

        <li class="item" data-index="2">
            事件委托,事件代理演示333
            <a href="javascript:;" class="del">删除</a>
            <a href="javascript:;" class="change">修改</a>
        </li>

        <li class="item" data-index="3">
            事件委托,事件代理演示444
            <a href="javascript:;" class="del">删除</a>
            <a href="javascript:;" class="change">修改</a>
        </li>
    </ul>

    <script>
        // 需求:点击 li 中的内容 提示点击了 第 n 条内容
        // 点击删除, 删除当前行
        // 点击修改,弹出一个遮罩层,里面显示要修改的内容
        // 里面有一个确认修改按钮,点击后将修改内容回显到指定位置

        // 利用普通方式实现
        // function $(selector) {
        //     return document.querySelectorAll(selector);
        // }

        // var items = $(".item");
        // var dels = $(".del");
        // var cs = $(".change");

        // for (var i = 0; i < dels.length; i++) {
        //     (function (j) {
        //         dels[j].onclick = function () {
        //             alert("您当前点击了第" + (j + 1) + "条内容")
        //         }
        //     })(i)

        //     dels[i].onclick = function (e) {
        //         e.stopPropagation();
        //         alert("删除成功")
        //     }

        //     cs[i].onclick = function (e) {
        //         e.stopPropagation()
        //         alert("修改成功")
        //     }
        // }


        // 利用事件委托的方式实现, 将子元素需要处理的事件交给父元素
        // 注意:必须是同种类型的事件
        var list = document.getElementById("list");
        list.onclick = function (e) {
            // 获取目标对象  兼容性写法
            var t = e.target || e.srcElement;
            var cls = t.className;
            switch (cls) {
                case "item":
                    alert("您点击了第" + (Number(t.getAttribute('data-index')) + 1) + " 条内容");
                    break;
                case "del":
                    alert("删除成功...")
                    t.parentNode.remove();
                    break;
                case "change":
                    alert("修改成功")
                    break;
            }
        }
    </script>
</body>

</html>