• Jquery中bind绑定和on绑定的区别


    定义:从jquery1.7后推荐使用on绑定事件,on()是bind(), live(), delegate()方法的替代品。

    注意:值得注意的是:on不仅仅作用于当前绑定的元素,对于未来有脚本语言创建的元素也会有同样的作用。

    移除:如果要移除on()事件,请是用off();

    使用场景:在我的项目中有这样的一种情况,需要动态的添加列表的元素。我在添加元素的时候每次都要为添加的元素bind相应的click等方法。这很让人烦恼,有没有执行一次就可以自动为我没次添加的元素绑定相应的事件呢?

    只要你是用的是jquery1.7+版本这时候变可以替换成bind方法为on方法。在容器初始化的时候使用on方法为容器中的元素绑定事件即可。

    例子--使用bind/on绑定事件:

    有一个值得注意的地方是,在使用on绑定事件的时候应该委托其父元素,查找子元素进行绑定。直接在子元素上绑定方法,无法实现实时绑定的效果。

    <!DOCTYPE html>
    <html>
      <head>
        <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                // 使用bind为页面初始化时为ul中li元素绑定hover事件
                //*
                $("ul li").bind('click', function(){
                    $(this).css({'background': 'green'});
                    // 新添加的此元素不具备点击的能力
                    $(this).parent().append("<li>I don't  know how call me comeing. If you click my body , i cant do anything.</li>");
                });
                //*/
                /*
                // 使用on为页面初始化时为ul中li元素绑定hover事件
                $("ul").on('click', 'li', function(){
                    $(this).css({'background': 'green'});
                    // 新添加的此元素具备点击的能力
                    $(this).after("<li>I don't  know how call me comeing. If you click my body , i cant anything</li>");
                });
                */
            });
        </script>
      </head>
      <body>
            <ul>
                <li>I'm first node. If you click my body , I well change my body to green and pull a new node in below.</li>
            <ul>
      </body>
    </html>

     总结:

    我并未做深入的研究,比如bind方法怎么实现的,bing,on之间的优劣对比。我却是找到了一个别人的帖子讲的比较仔细,希望有时间我也可以仔仔细细的研究研究。但是今天,先到这里,将连接奉献,以供参考。

    http://www.jb51.net/article/67166.htm

  • 相关阅读:
    不用轮子自己写滑动块
    let能否完全替代IIFE
    css3@media实现原理
    SQL 分组后获取每组中最大值
    如何在 JavaScript 中使用 C 程序
    响应式编程(Reactive Programming)(Rx)介绍
    图表(Chart & Graph)你真的用对了吗?
    JavaScript编码指南
    游戏心理学
    WannaCry结束了? 安专家注册域名掐断病毒传播
  • 原文地址:https://www.cnblogs.com/zsslll/p/7088553.html
Copyright © 2020-2023  润新知