javascript事件委托与"坑"

问题

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

一个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讲解

总结

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

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

原文地址:https://www.cnblogs.com/luyuqiang/p/javascript-delegation-event-and-problem.html

时间: 2024-08-28 11:17:44

javascript事件委托与"坑"的相关文章

javascript事件委托机制详解

以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息 <ul class="top"> <li>橘子</li> <li>香蕉</li> <li>苹果</li> <li>梨子</li> <li>

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

javascript 事件委托(代理)

事件委托(代理):就是利用事件冒泡机制,在最顶层触发事件的dom对象上绑定一个处理函数.在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托. 事件委托的好处是:节省资源 和 新增的元素也会有事件处理机制(这是项目中比较常见的问题) 简要的用两个例子来解释一下事件委托这回事... 先说说要产生的效果:我的想法是利用按钮点击新增li标签,而且新增的li标签也要有点击事件... HTML 代码 <ul id="ul1"> <li>1111</li>

JavaScript 事件委托的技术原理

如今的 JavaScript 技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: 1 2 3 4 5 6 7 8 <

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

javascript 事件委托 和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

JavaScript事件委托原理及Jquery中的事件委托

概念 事件委托,通俗来说就是将元素的事件委托给它的父级或者更外级元素处理. 事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(或文档). 事件捕获:事件开始由不太具体的节点接收,然后逐级向下传播到最具体的节点.它与事件冒泡是个相反的过程. DOM2级事件规定的事件流包括三个阶段: 事件捕获 目标阶段 事件冒泡 原理 事件委托就是利用事件冒泡机制实现的. 假设有一个列表,要求点击列表项弹出对应字段. <ul id="my

javascript - 事件委托

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委托</title> <style> ul{ padding: 20px; list-style: none; } </style> </head> <body> <ul id="ul&qu

javascript事件委托练习

JavaScript事件代理是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就不需要为每一个元素添加或者删除事件处理器,从而避免了内存泄露或者是遍历节点造成的性能下降. 如果整个页面都采用同样事件流方式,当红色蓝色区域触发相同事件,冒泡法:先处理蓝色区域请求,捕获法:先处理红色区域请求 如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(