输入框事件监听(五)：如何感知JS设值的变化

通过change事件，输入框可以感知用户手动输入，但是如果用程序对输入框进行赋值，则会出现无法感知的情况。

实践的HTML如下：

<input type="text" id="username" name="username"/>

实践的JS如下：

var username = document.querySelector("#username"),    counter = 0;//  创建定时器对其进行设值setInterval(function() {    //  强烈推荐使用这种方式赋值    username.setAttribute("value", counter++);    //  对输入框赋值    //  username.value = counter ++;}, 1000);//  监听输入框的change事件username.addEventListener("change", function() {   console.debug("change", this.value);});

执行上面的代码，观察浏览器的控制台窗口，发现没有任何输出，也就是说对于程序设值的这种方式，输入框完全无法感知到变化。那使用focus与blur事件呢？

//  在设值时触发focus、blur事件setInterval(function() {    username.focus();    //  强烈推荐使用这种方式赋值    username.setAttribute("value", counter++);    //  对输入框赋值    //  username.value = counter ++;    username.blur();}, 1000);//  监听输入框的blur、focus事件username.addEventListener("blur", function() {   console.debug("change", this.value);});

执行的结果是，只能感知到很少的一部分状态变化(随机地有几次被感知到)，所以这种办法不能被采用，因为必然会出现难以预料的bug。并且这种办法会在设值时侵入太多的代码，难以满足实际的情况，如第三方插件封装了某个输入框，我们想感知到此输入框内容的变化，如果采用上面的代码，则需要大量地修改第三方插件的代码。

经过仔细地研究，发现HTML5提供了一个新的观察接口Observer，可以用来观察DOM的子节点与属性的变化，实例如下：

//  定义观察器Observervar  observer = new MutationObserver(function() {    console.debug(username.value);});//  定义需要监控dom的哪些内容observer.observe(username, {    attributes : true,    attributeOldValue : false,    attributeFilter : ['value']    characterData  : true,    characterDataOldValue : true});

现在观察浏览器的输出窗口，发现能观察到每一次值的改变。但需要特别注意的是，赋值的方式一定要采用setAttribute方式，赋值的方式一定要采用setAttribute方式，赋值的方式一定要采用setAttribute方式。(重要的事情说三遍)