事件委托

Posted 2020-08-30 党兴明

事件委托

当很多元素绑定相同事件或动态生成DOM时推荐使用事件委托

    <div id="box" style="width: 200px;height: 200px; background: green;">
        <input class="button" type="button" value="按钮" />
    </div>

$(function(){
    //普通事件绑定
    //每个按钮绑定了一个事件
    $(\'.button\').bind(\'click\',function(){
        alert(\'事件委托\');
    });
    
    //事件委托
    $(\'#box\').delegate(\'.button\',\'click\',function(){
        $(this).clone().appendTo(\'#box\');
    });
    //停止事件委托
    $(\'#box\').undelegate(\'.button\',\'click\');
    
});

另：

如果使用clone（true）;虽然可以把时间复制过来，那和普通时间绑定效果一样，实现不了时间委托冒泡的效果

还有一个废弃删除的方法实现事件委托live()和die()

 不过上述方法终将被废弃，有整合的方法on() off() one()等