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并无区别

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

demo2:

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

 })
</script>

demo3

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

事件委托的好处

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

以上所述是小编给大家介绍的jQuery中的on与bind绑定事件区别实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jq # bind # 和on的区别 # 和on # JQuery绑定事件四种实现方法解析 # jquery绑定事件 bind和on的用法与区别分析 # jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例 # jquery 给动态生成的标签绑定事件的几种方法总结 # jQuery使用bind函数实现绑定多个事件的方法 # jQuery绑定事件方法及区别(bind # click # on # live # one) # 浅谈jquery之on()绑定事件和off()解除绑定事件 # jQuery on()方法绑定动态元素的点击事件无响应的解决办法 # 深入理解JQuery循环绑定事件 # jquery html动态添加的元素绑定事件详解 # jquery事件绑定方法介绍 # 绑定 # 不具备 # 小编 # 选择器 # 多个 # 在此 # 也能 # 给大家 # 弹出 # 做一个 # 这种情况 # 可选 # 影响到 # 定了 # 请用 # 时要 # 就在于 # 你会发现 # 所述 # 给我留言

返回目录在线咨询

上一篇：电源冗余在服务器硬件配置中是否必要？了解其对业务连续性的保障作用
下一篇：网站制作视频开头怎么写,有一个视频电影网站叫u什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求