Jquery之绑定事件的三种方法(.bind .live .on .delegate )

来源:互联网 发布:华为荣耀盒子安装软件 编辑:程序博客网 时间:2024/05/22 10:40

live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应的事件。


1.$(selector).bind(event,data,function)    亲自试一试

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数

bind()对于未来的元素无效,live()弥补这个缺点。


 描述event

必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。


$(selector).bind({event:function, event:function, ...})   亲自试一试


参数描述{event:function, event:function, ...}必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。


2.$(selector).live(event,data,function)  亲自试一试

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。


3.$(selector).on(event,childSelector,data,function,map)     尝试一下 »

 描述event必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。data可选。规定传递到函数的额外数据。function可选。规定当事件发生时运行的函数。map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

从 bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。

Changing from delegate() to on()
如何使用 on() 来达到与 delegate() 相同的效果。

从 live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

添加多个事件处理程序
如何向元素添加多个事件处理程序。

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

向函数传递数据
如何向函数传递数据。

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

移除事件处理程序
如何使用 off() 方法移除事件处理程序。

4.$(selector).delegate(childSelector,event,data,function)   亲自试一试

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。


0 0
原创粉丝点击