以下jquery对象方法中使用了事件委托的是 jquery怎么事件委托

jquery怎么事件委托

jQuery事件的绑定和委托可以用多种方法实现，on()  、 bind()  、 live()  、 delegate() ，还有one()。

有时我们可能会像下面这样绑定一个事件：

复制代码 代码如下:
$("#div1").click(function() {
alert("点击后触发")
})
上面的事件绑定，我们可以通过多种方式去实现：

1. on()

复制代码 代码如下:
//无数据参数
$("p").on("click", function(){
alert( $(this).text() )
})

//有数据参数  
function myHandler(event) {
alert(event.data.foo)
}
$("p").on("click", {foo: "bar"}, myHandler)
与on()对应的是off()，用来移除事件绑定：

复制代码 代码如下:
var foo = function () {
// code to handle some kind of event
}
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo)

// ... foo will no longer be called.
$("body").off("click", "p", foo)
off()：移除on()进行的绑定
one()：只绑定一次。

2. bind()
参数：
(type,[data],function(eventObject))
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

(type,[data],false)
type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

同时绑定多个事件类型:

复制代码 代码如下:
$(#foo).bind(mouseenter mouseleave, function() {
$(this).toggleClass(entered)
})
同时绑定多个事件类型/处理程序:

复制代码 代码如下:
$("button").bind({
click:function(){$("p").slideToggle()},
mouseover:function(){$("body").css("background-color","red")},
mouseout:function(){$("body").css("background-color","#FFFFFF")}
})
你可以在事件处理之前传递一些附加的数据。

复制代码 代码如下:
function handler(event) {
alert(event.data.foo)
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

复制代码 代码如下:
$("form").bind("submit", function() { return false })
bind存在的问题
如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存（类似于让每个人亲自站在门口等快递）。
在前面这个例子的基础上，如果我们想实现一个简单的相册应用，每页只显示50张照片的缩略图（50个单元格），用户点击“第x页”（或“下一页”）链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下，似乎使用.bind()方法为50个单元格绑定事件又可以接受了。
事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件（类似于新来的员工收不到快递）。
事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：

复制代码 代码如下:
$("#info_table td").live("click",function(){/*显示更多信息*/})

这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。

unbind()：移除bind进行的绑定。

3. live()
到目前为止，一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：
$()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；
收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。
解决之道
为了避免生成不必要的jQuery对象，可以使用一种叫做“早委托”的hack，即在$(document).ready()方法外部调用.live()：

复制代码 代码如下:
(function($){
$("#info_table td").live("click",function(){/*显示更多信息*/})
})(jQuery)
在此，(function($){...})(jQuery)是一个“立即执行的匿名函数”，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。
为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

复制代码 代码如下:
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/})
这样，“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，所以这里指定上下文对象时使用的是$("#info_table")[0]，即使用数组的索引操作符来取得的一个DOM元素。

4. delegate()
如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

使用.delegate()，前面的例子可以这样写：

复制代码 代码如下:
$("#info_table").delegate("td","click",function(){/*显示更多信息*/})
使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：
直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；
可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下，也可以使用.live()。
提示：使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

undelegate(): 移除delegate的绑定

jquery .on（）事件委托~~~

//页面载入函数，写一个就可以了
jQuery(function($){
    ...略
    $("body").delegate("#demo-list li", "click", function(){
        $(this).addClass("active").siblings("li").removeClass("active")
    })
    ...略
})

javascript 中的事件委派的作用是什么

所谓事件委托，就是让一个下属分别干的事情交给上司办了。比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件：
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
如果给每个li添加点击事件：
var li=document.getElementsByTagName(li)
for(var i=0i<li.lengthi )
    alert(li[i].innerHTML)
要是用事件委托
    var ul=document,getElementById(ul1)
    var target = ul.target || ul.srcElement    //兼容处理
    alert(target,innerHTML)
这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能。

jQuery的事件委托机制和事件绑定的区别

打个比方：事件委托就好比你遇到什么困难了都交给自己的爸爸（或者是爷爷、爷爷的爸爸、爷爷的爷爷……）去处理，而且不管你有多少个兄弟姐妹，大家都交由爸爸去统一解决问题，这样的话就不管有多少问题都只需要一个处理程序即可。而且，此后即使你妈妈再给你生多少个弟弟妹妹，你们的爸爸都会自动接管他们。所以，“事件委托”就是把子元素的事件都委托给父元素（准确说应该是祖先元素）去处理。
而事件绑定就好比每个人的事都由自己去处理，兄弟姐妹之间互不干涉，也互不帮忙，新出生的弟弟妹妹也要自己去解决自己的问题，有多少个人就有多少个处理问题的过程和结果。所以，“事件绑定”就是由每个元素自己去响应事件，各自为政。

javascript什么时候使用事件委托

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处呢：1，提高性能。

我们可以看一个例子：需要触发每个li来改变他们的背景颜色。

<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul> 
window.onload = function(){
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li")
for(var i=0 i<aLi.length i ){
aLi[i].onmouseover = function(){
this.style.background = "red"
}
aLi[i].onmouseout = function(){
this.style.background = ""
}
}
}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li")
/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event
var target = ev.target || ev.srcElement
//alert(target.innerHTML)
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event
var target = ev.target || ev.srcElement
//alert(target.innerHTML)
if(target.nodeName.toLowerCase() == "li"){
target.style.background = ""
}
}
}

好处2，新添加的元素还会有之前的事件。

我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li

如：

<input type="button" id="btn" />
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul> 

不用事件委托我们会这样做：
window.onload = function(){
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li")
var oBtn = document.getElementById("btn")
var iNow = 4
for(var i=0 i<aLi.length i ){
aLi[i].onmouseover = function(){
this.style.background = "red"
}
aLi[i].onmouseout = function(){
this.style.background = ""
}
}
oBtn.onclick = function(){
iNow 
var oLi = document.createElement("li")
oLi.innerHTML = 1111 *iNow
oUl.appendChild(oLi)
}
} 

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li")
var oBtn = document.getElementById("btn")
var iNow = 4
oUl.onmouseover = function(ev){
var ev = ev || window.event
var target = ev.target || ev.srcElement
//alert(target.innerHTML)
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event
var target = ev.target || ev.srcElement
//alert(target.innerHTML)
if(target.nodeName.toLowerCase() == "li"){
target.style.background = ""
}
}
oBtn.onclick = function(){
iNow 
var oLi = document.createElement("li")
oLi.innerHTML = 1111 *iNow
oUl.appendChild(oLi)
}
}

Jquery 事件委托 导致点击事件多次执行

这个是点击document的时候回去判断是否是#xx元素，如果是才弹出。
应该是你程序造成多次绑定了。你在这个事件绑定的前面紧挨着加上。$(document).off(click,#XX)试试

为什么jquery 将事件委托放在this.context上

(function($){ ...略 $("body").delegate("#demo-list li", "click", function(){ $(this).addClass("active").siblings("li").removeClass("active") }) ...略})