live(),bind(),delegate()等事件绑定方法的区别及应用解析

淩亂°似流年 2023-08-17 17:20 50阅读 0赞

1 首先bind()方法是最直观的，但是也是弊端最大的。

$('a').bind('click',function(){alert('that tickles!')})

这和事件冒泡有直接关系，当我们点击了<a></a>标签时，会立马执行alert,但与此同时，click()事件会接着向DOM树的根方向传播，广播到父元素，由父元素向上到每个祖先元素，只要是它的某个后代元素上的click()事件被触发，那么整个dom树都会牵一发而动全身。所以对未来元素的绑定不能用bind.

2 live()方法的应用显然比bind()好了很多，用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.live( events [, data ], handler )

jQueryObject.live( eventsMap )

实例：

$('a').live('click',function(){alert('That tickles!')})

2.1 其中events为string类型，一个或多个用空格分隔的事件类型的可选的命名空间；data为可选的，任意类型，作用是传递给事件处理函数的任意数据；hander指定的事件处理函数；eventMap为一个object对象，每个属性对应事件类型和可选的命名空间（event）,属性值对应绑定的事件处理函数。

2.2 live()的事件处理函数全部附加到document对象上，所以事件的处理时间可能会长一些，冒泡执行使会检查对象是不是对应的事件(本例中会检查是不是click事件)，更重要的是会检查该事件的目标元素是否与“a”这一css选择器匹配（当前jQuery对象必须通过选择器字符串构造，否则无法处理触发事件）。

2.3 live()方法还可以被绑定到具体的元素上（not document）

eg:

$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})//很useful的特点~

live()方法还有一个特点就是即使是后面创建的元素，用它绑定的事件会一直有效。

$("#jnBrangList").find(".imageMask").live("hover",function(){
            $(this).toggleClass("imageOver");
        });

如上例，因为“imageOver”元素是被页面加载完后动态创建的，所以如果用bind()的话是不会有效果的。

2.4撤销live(),可以匹配使用die()

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

语法为：

$(selector).delegate(childSelector,event,data,function)

![291030181152309.png][]

这样我们可以把上面live()的实例改成：