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

前端之家收集整理的这篇文章主要介绍了jQuery中的on与bind绑定事件区别实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

demo1:

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

  • 1
  • 2
  • 3
  • demo2:

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

    })

    demo3

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

    事件委托的好处

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

    以上所述是小编给大家介绍的jQuery中的on与bind绑定事件区别实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/jquery/41232.html

    猜你在找的jQuery相关文章