今天工作中遇到个问题，问题是这样的，一个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等浏览器的测试完全达到了预期的效果，这样处理之后心里果然舒服多了哈哈哈哈，在此分享出来供烦恼于此的小伙伴们一起享用！