jQuery使用on进行事件委托，父、子元素绑定相同事件，阻止冒泡

Serena_tz

于 2021-04-06 15:54:23 发布

阅读量1.3k

点赞数

分类专栏： jQuery 文章标签： jquery event js

本文链接：https://blog.csdn.net/Serena_tz/article/details/115462827

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近公司在做的一个移动门户需要使用jQuery，但是好久没有用jQuery进行开发，着实有点忘记jQuery的语法。jQuery中最推荐的事件绑定方式是用on事件，同时利用on事件也能完成事件委托。
因为该移动门户中展示的卡片列表是通过ajax获取数据后新生成的元素，所以，要么重新绑定一次事件，要么，进行事件委托，将事件监听绑定在新生成的元素的父元素上面。我采用了第二种方法，也就是利用on方法进行事件委托，利用ul列表做了简单的测试。
因为父、子元素均绑定了相同的事件，而新生成的子元素要将事件委托给父元素，所以要在子元素委托的时间中阻止事件冒泡，就不会重复触发事件。
实例代码：

<!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>
        .box{
            background-color: blue;
            padding: 20px;
            width: 200px;
        }
        .ul{
            background-color: #bfa;
            padding: 50px;

        }
        .li{
            background-color: pink;
            padding: 20px;
            list-style: none;
            border-bottom: 1px solid #000;

        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="ul">
            <li class="li">001</li>
            <li class="li">002</li>
            <li class="li">003</li>
            <li class="li">004</li>
            <li class="li">005</li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(".ul").on("click",function(){
            console.log("点击了ul")
        })
        // $(".li").on("click",function(event){
        //     // 阻止事件冒泡
        //     event.stopPropagation();
        //     console.log("点击了li")
        // })
        // 上方注释的代码是普通的写法，也就是没有进行事件委托
        // 下方的代码是进行了事件委托，事件对于未来的元素依然生效
        $(".ul").on("click","li",function(event){
            // 阻止事件冒泡
            event.stopPropagation();
            console.log("点击了li，事件委托的写法")
        })
    </script>
</body>
</html>