js事件代理

以往如果我们给一个按钮绑定事件是这样的

    $aLi.bind('click',function(){
         $(this).css({background:'gold'})
    });

点击之后背景变为gold颜色.

但是如果有2000个按钮?绑定是不是太麻烦了？？

以往如果我们给一个按钮绑定事件是这样的

    $aLi.bind('click',function(){
         $(this).css({background:'gold'})
    });

点击之后背景变为gold颜色.

但是如果有2000个按钮?绑定是不是太麻烦了？？

这里就用到了代理这种设计模式，简单说一个例子.比如我的boss要采购一批Mac，但是boss不知道怎么采购(不熟悉业务流程)，但是他不知道我知道啊。那我的boss最快的解决方式就是让我’替’他去采购。那么此处，我的boss就是委托方，我就是代理方(delegate)–我的boss(委托方)委托我(代理方)去办事.

看看JQ事件委托代码
其中list是一个ul,点击其中的li变色.

    $list.delegate('li','click',function(event){
            $(this).css({background:'gold'});
    }

这个方式中,通过事件冒泡的方式,我点了li(li是ul的子级),事件冒泡机制会把li收到的事件传递给父级ul。ul就知道了,用户点了什么也就是event中的target，即我点的那个li。 ul知道我点了哪一个li之后，自己不用去实现具体绑定，委托该li执行事件,ul就是委托方event.delegateTarget。这样的好处不用每个开始就绑定事件，点了哪一个绑定执行就好了。

委托方可以主动取消事件代理.

$list.undelegate();

也可以这么写

$(event.delegateTarget).undelegate();

两者都是一样的，$list就是$(event.delegateTarget) 都是委托方ul。