编写 input-filter 插件中的所知所得

GitHub:codelegant/input-filter,Git@OSC:chuanfeng/input-filter

attachEvent 中的 this

事件处理程序在事件目标上定义,所以它们作为这个对象的方法来调用并不出人意料。这就是说,在事件处理程序内,this关键字指的是事件目标。

但是,对于attachEvent()来说,这是不对的:使用achEvent()注册的处理程序作为函数调用,它们的 this 值是全局(Window)对象。

解决方案:

onpropertychange 的堆栈溢出

顾名思义,一个元素的属性更改的时候触发,他过于强大了,“value”,“style”,“class”等改变的时候就会触发,如下代码(在 IE8 中运行):

只需要输入框中输入一个字符就能触发事件,然后就停不下来了,比如你输入“a”,你以为你得到的是“a property”,结果你得到的却是“a property property property ...”,一长串不知道所谓的结果:
onpropertychange stack overflow

究竟发生了什么?回到“onpropertychange”的定义,属性改变时触发,模拟下整个程序的运行:

  1. 输入字母“a”;
  2. 触发“onpropertychange”事件;
  3. 事件响应函数运行;
  4. 代码片段:this.value=this.value+" property"运行;
  5. “textarea”中的值修改为“a property”;
  6. 因为“textarea”的值被修改,而“value”是属于“onpropertychange”监听的属性,于是“onpropertychange”再次被触发,一直循环停不下来,直到“堆栈溢出”。

解决的办法是加入判断条件以及正确的退出语句

  • 判断条件:通常是你不希望得到的结果,结果不正确,才会去执行语句。
  • 退出语句:通常为return false;,有些情况无需退出语句,但我的建议是任何情况都应该有退出语句

比如事件响应函数可以这样修改:

不唐突的错误处理

所谓唐突的错误处理,直接将错误抛出,导致程序中断运行:

而不唐突的错误处理,将抛出的错误捕获,在控制台中输出,程序不中断运行

发表评论