jquery中bind和on的区别

Posted 2020-11-17 roy-blog

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。