代理绑定和直接点击事件的区别

如果有大量动态生成的元素，普通的绑定方式会有很多不便，委托的方式有更好的性能和灵活性。因为可能你绑定的时候那个dom元素还没有生成，所以整个页面渲染完了之后，点击目标可能出不来识别不到点击事件( 以下代码用的是jquery写法）

<div class="button">nihao</div>
<span></span>

1、普通点击事件

 $('.button').click(function () {
        $('span').append('<div class="aa">aa</div>')
    });
    $('.aa').click(function () {
        alert($(this).text())
    })

此时点击aa是没有弹窗的，因为未绑定成功

2、代理绑定事件

$('.button').click(function () {
        $('span').append('<div class="aa">aa</div>')
    });
    $('span').on('click','.aa',function () {
        alert($(this).text())
    })

此时事件绑定成功，正常触发，有弹框。