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可以給動態添加的元素加上綁定事件。