JQuery中的事件委托

最新推荐文章于 2024-03-31 03:13:13 发布

进击的代码君

最新推荐文章于 2024-03-31 03:13:13 发布

阅读量333

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/clear_love8/article/details/89845297

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件委托：简单理解为，自己无法做到的事情，我们可以通过委托给其他人来完成，然后将结果反馈给我们自己

1.当未使用事件委托时，动态新增的li元素并不会触发点击事件，因为当入口函数执行时还没有动态新增的li元素，所以无法触发该元素的点击事件。
举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JQuery-delegate</title>
    <script src="jQuery\jQuery1.12.4.js"></script>
    <script>
        $(function(){

            $("ul>li").click(function(){
                console.log($(this).html());
            });
            $("button").click(function(){
                $("ul").append("<li>我是新增的li元素</li>");
            });
        })
    </script>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <button>新增li元素</button>
</body>

</html>

在这里插入图片描述
2.事件委托之后，因为在入口函数加载完成之后，ul元素已存在，所以可以将事件委托给ul元素来执行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JQuery-delegate</title>
    <script src="jQuery\jQuery1.12.4.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $("ul").append("<li>我是新增的li元素</li>");
            });
            $("ul").delegate("li","click",function(){   //事件委托。将li的click事件委托给ul监听
                console.log($(this).html());   //$(this)运用了事件冒泡
            });
        })
    </script>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <button>新增li元素</button>
</body>

</html>

在这里插入图片描述

进击的代码君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的事件委托

事件委托：简单理解为，自己无法做到的事情，我们可以通过委托给其他人来完成，然后将结果反馈给我们自己1.当未使用事件委托时，新增的li元素并不会触发点击事件，因为当入口函数执行时还没有新增的li元素，所以无法触发该元素的点击事件。举例如下：<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫