日期控件的值改变时触发事件问题 litter

在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

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