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

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

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

 1 $(function () {
 2           $("#input1").change(function () {
 3               var  vinput1 = $("#input1").val()；
 4               $("#input2").val(vinput1 );
 5           });
 6           $("#input2").change(function () {
 7                var  vinput2 = $("#input2").val()；
 8                $("#input3").val(vinput2  );
 9           });
10      }) 

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

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

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

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

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

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

 1 $(function () {
 2         $("#input1").bind("input propertychange", function () {
 3             var  vinput1 = $("#input1").val()；
 4             $("#input2").val(vinput1 );
 5         });
 6         $("#input2").bind("input propertychange", function () {
 7              var  vinput2 = $("#input2").val()；
 8              $("#input3").val(vinput2  );
 9         });
10     }) 

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

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

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

 1 $(function () {
 2         $("#input1").bind("input propertychange", function () {
 3            var vinput1 = $("#input1").val();
 4            $("#input2").val(vinput1);
 5            $("#input2").trigger("input");
 6            $("#input2").trigger("propertychange");
 7         });
 8         $("#input2").bind("input propertychange", function () {
 9             var vinput2 = $("#input2").val();
10            $("#input3").val(vinput2);
11         });
12     })  

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

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

 

转载于:https://www.cnblogs.com/wenpeng/p/8336447.html