今天工作中遇到个问题，问题是这样的，一个form表单中有比较多的input标签，因为form中的input标签中的值都需要前端做客户端校验，由于本人比较懒而且特不喜欢用循环给

每个input元素添加blur事件处理，感觉这样有损专业前端形象！想过用事件委托，然而focus、blur事件利用冒泡机制搞事件委托行不通啊，父级元素不支持focus、blur咋办？？？？

由此引发了对此问题的思考，人生就是这样，总觉得自己NB的不行，感觉自己什么都会，然而你在没遇到boss的时候打着小怪一直都会觉得自己天下无敌，遇到了才发现自己其实不会

的东西还有很多...不过这也是好事，因为自己在遇到问题之后才会放下自以为是，才会不断的去学习，不断的成长!

　　好了进入正题，既然遇到问题了就得想办法解决经过寻师访友终于找到了解决的办法，在此记录下来以防自己以后忘记，记笔记也能加深自己对问题的记忆和理解。

  1.  PXJSFrame.readyEvent(function(){
  2.      var _e = PXJSFrame.Event,_dom = PXJSFrame.DOM;
  3.      var wrap = _dom.getById('container');
  4.      if(_e.isIE){
  5.          /*
  6.          对于低版本的IE浏览器因为他们不支持事件捕获，而他们支持focusin、focusout事件
  7.          使用该事件加事件委托能解决低版本IE的focus、blur事件委托的问题
  8.           */
  9.          _e.addEvent(wrap,'focusout',handler);
  10.      }else{
  11.          /*
  12.              高版本的IE浏览器以及主流标准浏览器则可以利用事件捕获机制来解决
  13.           */
  14.          _e.addEvent(wrap,'blur',handler,true);
  15.      }
  16.      function handler(event){
  17.          var tar = _e.getTarget(event);
  18.          if(tar.nodeName.toLowerCase()=='input'){
  19.              if(!tar.value){
  20.                  var txt = _dom.getText(_dom.prevEle(tar)[0]);
  21.                  txt = txt.substr(0,txt.length-1);
  22.                  tar.focus();
  23.                  alert(txt+'不能为空!');
  24.              }
  25.          }
  26.      }
  27.  });

HTML代码如下:

  1. <body>
  2.  <div id="container">
  3.      <ul>
  4.          <li><label>用 户 名:</label><input type="text" /></li>
  5.          <li><label>密  码:</label><input type="password" /></li>
  6.          <li><label>确认密码:</label><input type="password" /></li>
  7.          <li><label>验 证 码:</label><input type="text" /></li>
  8.      </ul>
  9.  </div>
  10.  </body>

　　经过在ie6、ie11、chrome、firefox等浏览器的测试完全达到了预期的效果，这样处理之后心里果然舒服多了哈哈哈哈，在此分享出来供烦恼于此的小伙伴们一起享用！

如果什么错误之处 还请各位大神多多指点~！小弟在此受您一拜！

focus、blur事件的事件委托处理(兼容各个流浏览器)的更多相关文章

  1. form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。

    在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的on ...

  2. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

  3. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  4. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  5. 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...

  6. onfocus事件,onblur事件；Focus()方法,Blur()方法

    <1> <pre name="code" class="html"><!DOCTYPE html PUBLIC "-// ...

  7. jQuery - focusin/focusout/focus/blur事件的区别与不同

    focus与blur事件:不支持冒泡 focusin与focusout:支持冒泡 事件触发顺序: 对于同时支持这4个事件的浏览器,事件执行顺序为focusin(聚焦) > focus > ...

  8. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  9. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

随机推荐

  1. 模态Model视图Push下一个视图(混合跳转)

    来自: http://www.cnblogs.com/dingding3w/p/6222626.html 如果没有UINavigationController导航栏页面之间切换是不能实现Push操作的 ...

  2. ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  3. Webpack单元测试，e2e测试

    此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...

  4. cuda编程学习5——波纹ripple

    /共有DIM×DIM个像素,每个像素对应一个线程dim3 blocks(DIM/16,DIM/16);//2维dim3 threads(16,16);//2维kernel<<<blo ...

  5. 在腾讯云上把Laravel整合万向优图图片管理能力，打造高效图片处理服务

    推荐理由: 现如今数据爆炸性增长,人类生活产出的数据越来越多,文字信息,图片信息,视频信息:但有很多信息我们都无法直接使用,需通过一定的处理,才能够获取其中对我们有用的信息,在腾讯云上的万向优图能够对 ...

  6. 如何使用bootstrap

    前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录 ...

  7. unity3D插件开发——前篇

    Unity3D(以下简称Unity)是今年来非常流行的游戏开发引擎.他不仅有足够和unreal(虚幻)引擎媲美的渲染效果,足够多的平台输出,更为突出的就是Unity本身的编辑器.unity本身除了使用 ...

  8. PRINCE2重要性--光环国际培训

    项目的重要性 答:对于当今的组织来说,一个关键的挑战,就是能够成功地平衡以下两个并存的.互相竞争的方面:保持现有的商业运营--盈利能力.服务质量.客户关系.品牌忠实度.生产效率.市场信心等,这些被称为 ...

  9. 关于JDEV的连接问题

    在JDev中有两个连接数据哭库的地方,双击项目名称,里面的Business Components里面的Connection里面的链接,这个链接是Run页面时候的链接 第二个链接在Oracle Appl ...

  10. Python之路-计算机基础

    一·计算机的组成 一套完整的计算机系统分为:计算机硬件,操作系统,软件.   硬件系统:运算器,控制器和存储器 ,输入设备,输出设备. 1.运算器:负责算数运算和逻辑运算,与控制器一起组成CPU. 2 ...