美文网首页
jQuery中的.bind() .live() .delegat

jQuery中的.bind() .live() .delegat

作者: KrisLeeSH | 来源:发表于2017-07-05 10:20 被阅读27次

    *其实这个问题大多数时候是面试官问的... *
    其实我觉得问这个问题好像并没什么卵意义,查文档或者 baidu 一下一大堆,况且 1.7+ 直接用 .on() 就好了(也是官方推荐)

    但是想拿offer就好好区别下呗

    区别

    看下面代码就懂了:

    $(selector).bind(event,data,function)
    $(selector).live(event,data,function) //jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替
    $(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;
    $(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;$(selector).bind(event,data,function)
    $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替
    $(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;
    $(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
    

    event参数

    需要注意的是单事件处理与多事件处理的区别
    单事件直接写事件string就行了,如:

    $(selector).bind("click",data,function);
    

    多事件的话:

    1. 空格分割:$(selector).bind("click dbclick mouseout",data,function)
    2. 对象定义事件及其处理函数:$(selector).bind({event1: function, event2: function, ...})

    总结

    .bind()

    直接绑定在dom 元素上。如果不调用stopPropagation(现代浏览器),cancelBubble(IE),那么他的祖先元素都会受到影响
    缺点:

    1. 不能动态绑定,后续添加的元素必须通过调用 .bind() 才能绑定事件。如 $('a').bind('click', () => alert('HAHA'));,只对当前dom树上的所有a元素绑定了click事件,后续插入的a元素需要再次调用来绑定事件
    2. 元素多的时候有效率问题

    .live()

    通过冒泡方式绑定到元素上。事件冒泡到document上是,jQuery会查找 selector/evnent metadata,然后决定哪个handler应该被调用。因为有冒泡的参与,handler执行时会有些延迟,但是绑定快啊。
    优点:

    1. 支持动态绑定,不用像.bind()一样要挨个绑定😉
    2. 你可以在document ready之前绑定事件
      缺点:
    3. 使用event.stopPropagation()是没用的,因为都要到达document
    4. 因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时,会非常慢
    5. 当发生事件的元素在你的DOM树中很深的时候,会有performance问题
    6. chaining没有被正确支持

    .delegate()

    小范围事件代理。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。
    优点:

    1. 效率高了,因为你可以选择把事件放到哪个元素上,即,冒泡冒到哪里结束
    2. chaining被正确支持了
      缺点:
      需要查找那个那个元素上发生了那个事件了,尽管比document少很多了,不过,你还是得浪费时间来查找

    .on()

    整合了上边的几种方法,1.9加入。同样的.unbind() .die() .undelegate(),也是一样的都是通过.off()来实现的。

    相关文章

      网友评论

          本文标题:jQuery中的.bind() .live() .delegat

          本文链接:https://www.haomeiwen.com/subject/ffducxtx.html