javascript事件委托与"坑"

Posted 2022-10-19 luyuqiang

问题

这是在工作中遇到的一个问题:

一个textarea文本框,需要动态监听输入文本个数

方案

通过谷歌查到一种完美的兼容方法

"如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦
因此这篇文章向大家介绍一种完美的解决方案：结合 html5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。"
引用自 http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

如果项目中使用了jQeury,可以这样绑定事件:

$("#content").on("input propertychange",function()
  //code...
);

propertychange

The onpropertychange event is only supported in conjunction with the legacy attachEvent IE-only event registration model, which has deprecated since Windows Internet Explorer 9 in favor of the W3C standard "addEventListener" event model.
引用自 https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx

propertychange事件只能通过早前的IE版本的attachEvent方法绑定,在IE9后支持了W3C标准的addEventListener方法绑定中被移除.

propertychange事件的兼容性从官网上没看到,网上的说法是IE6-8.

input

input事件因为采用的是W3C标准,所以主流现代浏览器都支持,IE在IE9后支持(详情看官网)

虽然input方法在IE9下有"剪切和删除不会触发"的BUG,但是综上两个方法仍是"完美"的兼容方案,所以项目中便使用了

"坑"

项目中要实现的对新添DOM实现变化监听.因此需要把事件委托到Document上(彼时还不知道事件委托的原理,只知道代码怎么写),上述代码改为:

$(document).on("input propertychange","#content",function()
   //code...
);

开发中发现input事件完美实现对新DOM的变化监听.但是propertychange事件怎么着也不触发.

网上关于propertychange事件不触发的文章很少,不过还是被我发现了,分享给大家网址

propertychange事件有个特点就是不支持冒泡，这样就不能实现事件的委托，而且jquery也没有解决这个BUG
引用自 http://www.cnblogs.com/3tree/p/4597295.html

上文中也给出了解决方案:

对于IE9+和firefox以及Opera浏览器，支持DOMAttrModified事件，和propertychange事件很相似，监听属性的变化，但是不监听用户操作的修改。
引用自 http://www.cnblogs.com/3tree/p/4597295.html

DOMAttrModified讲解

总结

通过这个"坑",我觉得我有必要看一下什么是冒泡事件?什么是事件委托的原理?

网上有太多讲解文章,因此我就不赘述了,挑选了讲解的比较明白的文章,感兴趣的同学自己看一下吧

• [译]JS事件顺序/捕获/冒泡详解
• 事件委托解析