js里事件委托绑定给document元素有什么好处？

Question

看别人的代码写事件委托时经常委托给document元素，例如$(document).on('click', '.son', function(){    alert('正在进入...');})事件委托不是绑定给父元素就好吗？绑定给document有什么好处？

Answer 1

相比绑定到父元素上，document没好处，相反还会带来更大的消耗。

Answer 2

委托也看情况，比如说订单列表，每个单子都有：发货、退货、确认收货、申请售后等等，

<div id="divOrder">

    <div class="ditem">

        <div>内容</div>

        <div>操作：发货、退货、确认收货、申请售后</div>

    </div>

    

    <div class="ditem">

        <div>内容</div>

        <div>操作：发货、退货、确认收货、申请售后</div>

    </div>

    

    ...

    

</div>

你看以上的结构，用委托就很方便的给整个列表绑定事件

$('#divOrder').click(function(e){

    e=e||window.event;

    var target=e.target||e.srcElement;

    //判断不同类型的按钮做处理，如果再加一个按钮，这里多一个判断就可以了

    console.log(target);

});

Answer 3

JS事件委托的目的是为了减少将相同的事件绑定到结构相同的DOM元素上
例如你没必要为了100个订单条目元素分别绑定一个点击事件回调，而是利用DOM的事件冒泡原理，将事件绑定到订单条目的父包裹容器元素上。

至于是否绑定到document上看你的DOM结构和监听事件的DOM元素的层级，更上层的绑定意味着需要在回调函数中添加更多的判断逻辑以区别不同的目标元素

例如理论上你可以只为真个页面在document上添加一个click事件回调,那么你就需要太回调函数中判断真个点击来自哪个DOM元素，哪类DOM元素，是订单条目呢还是添加按钮,想监听的元素越多判断就会越长
而为相同类型的DOM添加一个事件回调，处理就会相对简单些....