31-jQuery事件委托

最新推荐文章于 2024-10-06 15:00:00 发布

旧爱学长

最新推荐文章于 2024-10-06 15:00:00 发布

阅读量85

点赞数

分类专栏： jQuery基础

本文链接：https://blog.csdn.net/weixin_43324273/article/details/105474621

版权

jQuery基础专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-jQuery事件委托</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.什么是事件委托?
            请别人帮忙做事情, 然后将做完的结果反馈给我们
            */
            $("button").click(function () {
                $("ul").append("<li>我是新增的li</li>");
            })

            /*
            在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
            */
            // $("ul>li").click(function () {
            //     console.log($(this).html());
            // });
            /*
            以下代码的含义, 让ul帮li监听click事件
            之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
            之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
            */
            $("ul").delegate("li", "click", function () {
                console.log($(this).html());
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>