31-jQuery事件委托

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

杨亚仑

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

阅读量96

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/82988737

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

学习了jQuery的事件委托，所谓事件委托就是指自己办不了的事让别让帮自己办。自己有什么办不了呢？比如说给新增的li添加点击事件自己就办不了，因为jQuery的入口函数是在所有的DOM元素加载后才执行的。

甲.delegate(乙，"click"，function(){}) 解释：甲在帮乙办点击这个事件

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

             /*
                jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候jQuery会遍历所有找到的元素
             **/
             /*
             这个事件是：点击每个li，将会获取到此li的html值，可是当点击新增的li时，却并不能获取
              这是因为，入口函数是在所有的dom元素加载后开始执行，而加载到的li只有3个而已，所以新增的li无法获取
             * */
             // $("ul>li").click(function () {
             //     console.log($(this).html());
             // })
             /*
              那该怎么办呢？
              思路：既然入口函数开始执行的时候，新增的li还没有，那我可以找li的父亲啊，让父亲帮儿子做事情，天经地义，
              而这就是所谓的事件委托
             * */
             /*
             代码解释：给ul一个监听事件，在点击li时，由于li没有click事件，所以通过事件冒泡找到ul
             而这个this指向的还是li
             而这个代码$("ul").click(function () {console.log($(this).html());})也是给ul添加监听事件，但这个this
             指向的是ul，却不是li了，这就是delegate方法的关键所在
             * */

            $("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>