日期控件的值改變時觸發事件問題

在input中添加一個日期控件，想日期改變的時候觸發某個事件。一般來講，下意識的就給那個input動態綁定了change事件，由於我使用的jquery-1.4.4所以是使用的live綁定。減縮代碼如下：

<!--cdr.show(this)就是顯示出日期控件-->
<input type="text" id="date" onFocus="cdr.show(this)" readonly />
<script type="text/javascript">
    $("#date").live("change",function(){
        alert("yes");
        //my_function.....
    });
</script>

綁定change后發現無效，我使用的是firefox和chrome。仔細檢查沒有拼寫錯誤后，我將change事件改為click試試，發現可以彈出窗口，那就說明是change這個事件的原因。
google后，網上大部分說的是這種情況一般出現在低版本IE上，而且jquery live方法效率很低，在1.9版本后已經被拋棄了。為了解決這個問題，開始了幾個小時的debug之旅。

• 首先我使用了jquery 1.11替換了1.4，並將live全部換成的on(這個頁面不全是我寫的)，確定替換之后沒有其他兼容問題后發現on方法還是無法觸發change事件
• 然后又使用delegate試試，不行。
• 又使用bind試試，還是不行。
• 搜索之后發現還有onpropertychange(IE專用),和oninput(非IE)事件可以監聽input值的改變，試過oninput之后不行，因為腳本修改的值不能觸發oninput事件。
• 將change改為click/blur之類的都可以正常觸發
• 查找change事件原理，發現change事件其實就是在元素獲得焦點的時候，保存當前值，失去焦點的時候，會將當前值和原來保存起來的值進行比較，如果不同，則觸發change事件。
  結論: 在綁定了日期控件之后綁定change事件，其實文本框的值是一直沒有改變的，所以不會觸發。
  測試：onFocus事件去掉，change事件就會正常觸發。

<input type="text" id="date" onFocus="cdr.show(this)" readonly />

<script type="text/javascript">

<!--以下是綁定change的時候的一些測試,都沒有正常觸發change事件
    <!-- jquery-1.4.4版本 -->
    $("#date").live("change",function(){
        alert("yes");
        //my_function.....
    });

    <!-- jquery-1.11.1版本-->
    $("#date").on("change",function(){
        alert("yes");
        //my_function.....
    });

    <!-- jquery-1.11.1和1.4.4-->
    $("body").delegate("#date","change",function(){
        alert("yes");
        //my_function.....
    });
    
    <!-- jquery-1.11.1和1.4.4-->
    $("#date").bind("change",function(){
        alert("yes");
        //my_function.....
    });
</script>

解決辦法：
再去想辦法綁定change事件已經不符合實際情況了，於是想着是出現日期，選擇日期后執行我的my_function。

• 於是就去看了日期控件的源碼，發現最后其實是點擊日期后，就會將點擊的日期值賦值給文本框，然后關閉控件。
• 由於我只想對這一個文本框執行my_function方法，所以給日期控件對象新增加了一個屬性unblur，讓它在關閉控件之前觸發。
• 然后在文本框觸發focus事件時，顯示控件，並且將我的my_function綁定給unblur
• 最后，在日期控件關閉后，就會觸發my_function

心得：基礎是十分的重要的！