问题
这是在工作中遇到的一个问题:
一个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
总结
通过这个"坑",我觉得我有必要看一下什么是冒泡事件?什么是事件委托的原理?
网上有太多讲解文章,因此我就不赘述了,挑选了讲解的比较明白的文章,感兴趣的同学自己看一下吧
原文地址:https://www.cnblogs.com/luyuqiang/p/javascript-delegation-event-and-problem.html