zoukankan      html  css  js  c++  java
  • jquery中bind和on的区别

    1.首先,来看看bind和on的语法。

    bind的用法:

     $('a').bind('click',[data],function(){})

    其事件的绑定者是固定的,就是a,第一个参数是事件,第二个参数可选,是要传递给回调函数的event.data参数,第三个参数是回调函数。例如:

    on的用法:

    on:$('body').on('click','a',[data],function(){})

    相比于bind,除了事件的绑定者(这边是body),在on的参数中还增加了一个选择器a,而事件将作用于这个a上面。

    2.区别

    正是由于on函数的参数中多出了一个选择器a,因此我们可以为动态生成的元素也绑定事件。而bind则做不到。

    如下例子。

    <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
    </ul>
    <script>
     $(function () {
      $('ul li').on('click',function(){
       alert($(this).text())
      }); 
     })
    </script>
    <script>
     $(function () {
      $('ul li').bind('click',function(){
       alert($(this).text())
      }); 
     })
    </script>

    上述代码用bind和on都没有什么区别。

    但是假如我们动态再生成一个li,则bind方法对这个新生成的li就不起作用,只能用on方法。

    以下这种写法不适用了

    <script>
     // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
     $(function () {
      $('ul li').bind('click',function(){
       alert($(this).text())
      }); 
      var ok = $('<li>4</li>');
      $('ul').last().append(ok);
     
     })
    </script>

    必须使用如下这种方式

    <script>
     // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
     $(function () {
      $('ul').on('click','li',function(){
       alert($(this).text())
      }); 
      var ok = $('<li>4</li>');
      $('ul').last().append(ok);
     })
    </script>

    所以总的来说,on可以通过委托给父元素的方法,为动态加入的子元素来添加事件。

    我们经常用的$("body").on("clikc",function(){});就是把事件都委托给了最顶层的父元素body。

  • 相关阅读:
    [洛谷][P1503][鬼子进村][Treap]
    [noi 2004] 郁闷的出纳员
    bzoj 3224,tyvj 1728普通平衡树
    Treap
    [模拟赛]棘手的操作
    bzoj 4551[Tjoi2016&Heoi2016]树
    bzoj2527 [Poi2011]Meteors
    bzoj4152 [AMPPZ2014]The Captain
    bzoj4516 [Sdoi2016]生成魔咒
    bzoj4547 小奇的集合
  • 原文地址:https://www.cnblogs.com/roy-blog/p/9176899.html
Copyright © 2011-2022 走看看