• JQuery中的事件委托


    JQuery 中的事件委托

    定义

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新元素的子元素也可以拥有相同的操作。可以理解为生命一个全局标量,所有的子元素,都要执行我声明父元素的参数。

    事件与事件委托代码对比

    事件 <!DOCTYPE html>

     <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
            <script>
                $(function(){
                        $ali = $('#list li');
                        $ali.click(function() {
                                $(this).css({background:'red'});
                                });
                        })
            </script>    
        </head>
        <body>
            <ul id="list">
                    <li>1</li>
                    <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>
            </ul>
        </body>
    </html>

    事件委托 <!DOCTYPE html>

      <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
            <script>
                $(function(){
                        $ali = $('#list');
                        $ali.delegate('li','click',function(){
                            $(this).css({background:'red'});
                        })
           })
            </script>    
        </head>
        <body>
            <ul id="list">
                    <li>1</li>
                    <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>
            </ul>
        </body>
    </html>

    易错点

    事件委托,用delegate(委托)词;由于事件委托 都是子元素委托给了父元素,因此声明的是父级元素,不许要声明子元素;

  • 相关阅读:
    ext文件系统机制原理剖析
    win10企业版无法访问共享文件夹
    Linux 系统 CPU 的性能监控及调优
    MySQL延时复制简介
    MySQL迁移升级解决方案
    Docker 微服务教程安装WordPress
    java
    pom.xml
    sharding-jdbc
    java-MyBatis可视化代码生成工具
  • 原文地址:https://www.cnblogs.com/zqlboke/p/9017000.html
Copyright © 2020-2023  润新知