今天工作中遇到個問題，問題是這樣的，一個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等瀏覽器的測試完全達到了預期的效果，這樣處理之后心里果然舒服多了哈哈哈哈，在此分享出來供煩惱於此的小伙伴們一起享用！