jQuery中的on与bind绑定事件区别实例详解

bind与on的区别就在于–事件冒泡，关于jquery中的on与bind绑定事件的区别通过本文给大家实例讲解

on(events,[selector],[data],fn)

• events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
• selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.
• data:当一个事件被触发时要传递event.data给事件处理函数。
• fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
• bind(type,[data],fn)
• 为每个匹配元素的特定事件绑定事件处理函数。
• jQuery 3.0中已弃用此方法，请用 on()代替。
• 参数类型跟前面那个on一样.

bind与on的区别就在于–事件冒泡

demo1:

## 点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别   

?

1 2 3 4 5 6 7 8 9 10 11 12

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

demo2:

?

1 2 3 4 5 6 7 8 9 10 11

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

demo3

?

1 2 3 4 5 6 7 8 9 10

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

事件委托的好处

• 万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；
• 为动态添加的元素也能绑上指定事件；