jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法。分享给大家供大家参考，具体如下：

前言

因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到各位朋友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。

一、bind()

简要描述

bind()向匹配元素添加一个或多个事件处理器。

使用方式

代码如下:

添加到元素的一个或多个事件，例如 click,dblclick等；

单事件处理：例如

代码如下:

多事件处理：1.利用空格分隔多事件，例如

代码如下:

SEOut",function);

2.利用大括号灵活定义多事件，例如

代码如下:

3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；

函数；

举例说明

jquery中bind()绑定事件方式

适用Jquery版本

jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。

三、delegate()

简要描述

delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式

代码如下:

添加事件处理程序的元素，一般为selector的子元素；添加到元素的一个或多个事件，例如 click,dblclick等；

单事件处理：例如

代码如下:

多事件处理：1.利用空格分隔多事件，例如

代码如下:

SEOut",function);

2.利用大括号灵活定义多事件，例如

代码如下:

调用同一函数情况；

大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；

函数；

举例说明

jquery中delegate()绑定事件方式

适用Jquery版本

jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；

五、四种方式的异同和优缺点

相同点：

1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式; 2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:

jquery中四种方式给未来元素设置事件