on和bind的区别，以及js重新渲染问题

前一段时间面试的时候，面试官问了这么一个问题说：Jquery中on和bind有什么区别？当时就一脸懵逼了，因为虽然一直用$("#id").bind("click",function(){})或者$("#id").on("click",".class",function(){})。但是真的问起来，他俩有什么区别还真的不知道。

这样，我们先从写法来看，bind后边参数一般就是绑定事件加方法；on后边的参数相比bind来说，多了一个selector。这就是他们的区别。我们可以通过几个开发中很容易遇到的情况来分析：

情况一：在一个页面上，有多个块，每个块的class是不同的，但是块中的子元素的class是相同的。这个时候你要给content1下的子元素的child绑定事件，用bind肯定是不可以的，因为这样会对所有的child元素绑定事件。但是用on就可以完美解决，给特定唯一父元素下的子元素绑定事件。

<div class="content1">
    <div class="child"></div>
</div>
<div class="content2">
    <div class="child"></div>
</div>
<div class="content3">
    <div class="child"></div>
</div>
<script>
    /*$(".child").bind("click",function () {
        //bind绑定事件
    })*/
    $(".content1").on("click",".child",function () {
        //on绑定子元素事件
    })
</script>

情况二：对于动态加载的class进行绑定事件。页面对于js只在加载的时候渲染一次，用on就可以对新添加的进行重新渲染，给动态添加的也加上绑定事件。

<style>
    .show-red{
        color: red;
    }
    .show-yellow{
        color: yellow;
    }
</style>
<div class="content1">123</div>
<div class="content2">456</div>
<script>
    $(".content1").addClass("show-red");
    $(".content2").addClass("show-yellow");
    /*$(".show-red").bind("click",function () {
        //bind给show-red绑定事件
    })*/
    $(".content1").on("click",".show-red",function () {
        //on给show-red绑定事件
    })
</script>

综上：on可以将子元素的事件委托给父元素进行处理；on可以给动态添加的元素加上绑定事件。