zoukankan      html  css  js  c++  java
  • 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(委托)词;由于事件委托 都是子元素委托给了父元素,因此声明的是父级元素,不许要声明子元素;

  • 相关阅读:
    javascript学习
    python学习计划
    利用spring的测试组建,测试bean
    log4j 输出完整的Exception信息
    根据身份证号,取得行政区划的Javascript实现
    软件全程建模1
    软件界面建模浅析
    RUP简介
    用例建模中的一个问题的讨论
    软件全程建模2
  • 原文地址:https://www.cnblogs.com/zqlboke/p/9017000.html
Copyright © 2011-2022 走看看