前端事件冒泡-事件代理

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

toptap8_nn

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

阅读量94

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011713916/article/details/119940208

版权

事件冒泡事件代理 jQuery DOM操作性能优化

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

9 篇文章 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>

    <script src="./main.js"></script>
    <!-- 事件冒泡原理：-->
    <!-- 子控件会一级一级上父控件传递 -->
    <script>
        $(function(){
            var $btn1 = $("#btn1");
            var $div1 = $('div');
            $btn1.click(function(){
                alert('我是按钮');
                // 去除div标签的弹窗
                return false;
            });

            $div1.click(function(){
                alert('我是div标签');            
            });
        // 因为btn1标签在div标签里
        // 对btn1标签进行点击动作时就会触发对div标签进行点击
        // 所以会同时显示两个弹窗 alert('我是按钮'); alert('我是div标签');
        // 去除div标签的弹窗
        // 函数后面加上 return false


        // -------
        // 事件代理
        // 通过事件代理，让父控件代理子控件，然后执行对子控件相关操作

        // 取ul 
        var $uls= $('div ul');
        // .delegate()方法进行编写
        // 参数1 取子标签（选择器的写法可写多个）；参数2 设置事件触发方式 ；参数3 写函数
        $uls.delegate('li','click',function(){
            $(this).css({'background':"green", 'color':'red'});
        });
        });
        

    </script>
</head>
<body>
 
    <div id="div1">
        <p>p标签</p>
        <input type="button" value="按钮" id="btn1">
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>罗翔</li>
        </ul>
    </div>
    
</body>
</html>

toptap8_nn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
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"> <ti
复制链接

扫一扫