jQuery元素绑定方式

在jQuery中,有四种绑定事件方法。分别是:on,live,bind,delegate
他们相对应的事件移出方法为:off,die,unbind,undelegate

1.bind

bind(type,[data],function(){});
type :事件类型
data:传入监听函数的参数
function:监听函数,可传event对象,但这里event不是原生js的,是jQuery封装过的

bind是在选择到的元素(目标元素)上绑定事件类型的监听函数,动态添加元素需再bind
源码:

bind:function(types,data,fn){
        return this.on(types,null,data,fn);
}

2.live

 live(type,[data],fn)
 参数与bind一致

区别:Iive将事件绑定到this.context,而不是自己身上
源码:

live:function(types,data,fn){
jQuery(this.context).on(types,this.selector,data,fn)
return this; 
}

context:元素限定范围(通常document)
主要是利用事件委托机制,把元素绑定到document上

3.由于live中时间委托机制范围太大为document,所以delegate为解决此问题产生
deletage相对于live多了个参数selector,用来指定触发事件的目标元素
监听器绑定事件到调用此方法的元素上

delegate:function(selector,types,data,fn){
      return this.on(types,selector,data,fn)
}

4.on :根据前面几个例子你会发现,在每个方法中都有调用on
on(type,[selector],[data],fn);
于deletage 相似,但参数顺序不用,而且selector变为可选项,灵活性更强,也是jQuery推荐写法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 此篇文章是在51edu.com上copy过来的,本来想注明作者的,但是没找到作者…… Query提供了多种绑定事件...
    java粑粑阅读 11,260评论 1 2
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,279评论 0 8
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 5,274评论 6 13
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,938评论 0 1
  • Xcode的插件可以使我们开发更方便,效率更高。你没有理由拒绝哈哈,下面推荐一些插件: Alcatraz http...
    王兆龙阅读 2,383评论 0 0

友情链接更多精彩内容