关于事件委托(delegate)怎么用

给每个li添加点击事件,每次点击都要循环遍历一遍,如果有很多li 就会影响性能。先来看看普通函数怎么实现点击事件。
html
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<input class='btn' type="button" value="点击添加">
js:
普通的点击事件
 $(function(){
$("li").click(function(){
$(this).css('background','red')
});
});
delegate 事件委托:
$(function(){
$('ul').delegate("li",'click',function(ev){
$(this).css('background','red')
//这里的this 只的是li,那怎么找到ul呢?
$(ev.delegateTarget).css('background','green')//这个可以找到委托人ul
//那取消委托呢?
$($(ev.delegateTarget)).undelegate("click")
});
})
delegate 事件委托:事件委托的有点1.提高性能 2.后面追加的元素也带有相同的事件
$(function(){
$('ul').delegate("li",'click',function(ev){
$(this).css('background','red')
//这里的this 只的是li,那怎么找到ul呢?
$(ev.delegateTarget).css('background','green')//这个可以找到委托人ul
//那取消委托呢?
$($(ev.delegateTarget)).undelegate("click")
});
$(".btn").on("click",function(){
$(".box ul").append("<li>追加进来的</li>")
console.log($(".box ul"))
})
})

 

0 个评论

要回复文章请先登录注册