javascript如何处理多级的实时监听

今日工作中遇到需求，要求js代码对表单中的input内容进行实时监听，当input中的值改变时触发一些事件。

按照常规思维，代码很快写完了。

 $(function () {
           $("#input1").change(function () {
               var  vinput1 = $("#input1").val()；
               $("#input2").val(vinput1 );
           });
           $("#input2").change(function () {
                var  vinput2 = $("#input2").val()；
                $("#input3").val(vinput2  );
           });
      }) 

但是很快发现有问题：因为实际需求是通过脚本修改input的值，并触发事件，而change事件触发必须满足如下条件：

1. 当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
2. 当前对象失去焦点(onblur)

通过查询，propertychange（ie）和input事件很快进入了我的视线范围。

onpropertychange，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

于是按照网上的方法完成了代码

 $(function () {
         $("#input1").bind("input propertychange", function () {
             var  vinput1 = $("#input1").val()；
             $("#input2").val(vinput1 );
         });
         $("#input2").bind("input propertychange", function () {
              var  vinput2 = $("#input2").val()；
              $("#input3").val(vinput2  );
         });
     }) 

但是很快，我又发现了问题：就是通过鼠标键盘或js操作input1控件的值，确实可以触发相应事件进而修改input2的值。但是input2的值被修改后，无法触发它自己的事件去修改input3的值。

我猜测可能input和propertychange可能不支持级联触发。

于是我尝试通过trigger手动触发下级控件的input和propertychange事件，将代码修改成这样：

 $(function () {
         $("#input1").bind("input propertychange", function () {
            var vinput1 = $("#input1").val();
            $("#input2").val(vinput1);
            $("#input2").trigger("input");
            $("#input2").trigger("propertychange");
         });
         $("#input2").bind("input propertychange", function () {
             var vinput2 = $("#input2").val();
            $("#input3").val(vinput2);
         });
     })  

通过实验，证明可以通过这种方式进行多级的input内容修改监听。

但是这种方式也有自己的问题：它需要手动指定并通过trigger触发，如果要触发很多层，或不知道下一层是哪一个控件的话，就很难保证代码的清晰和整洁了。