propertychange事件导致的IE浏览器堆栈溢出

前段事件做项目，在IE下测试时，发现会报堆栈溢出的错误，其他浏览器正常，于是开始了苦逼的IE查错路程。。。

 

由于是在操作了某个输入框之后才出现的错误，所以把重点放到了input的相关事件，最终发现是这行代码导致：

$("#school").on("input propertychange",function () {
    var t = $(this);
    t.removeAttr("data-schoolid");
})

 

一开始还没有领会过来，监控输入框的输入，怎么就导致堆栈溢出了，只到深入了解了input和propertychange事件。

input:HTML5标准事件，输入框文本监听；

propertychange：IE专属事件，顾名思义，属性改变事件，任何一个HTML属性改变都会触发，没错，问题就出在这里，在属性改变事件里面又改变了另一个属性（去掉data-schoolid属性），导致事情触发陷入死循环引发堆栈溢出！

解决：引入一个隐藏域，<input type="hidden" id="schoolData" />，在用户输入的时候动态改变隐藏域的属性值，而非输入框本身属性值，轻松解决！

反思：一般代码出现这种bug，无非这几种情况：1、思路不清晰，2、基础不扎实，3、考虑不周全，而这个错误的出现明显就是因为基础不扎实，在用到某个API的时候，要尽量多了解，知其然也要知其所以然!