focus、blur事件的事件委托处理(兼容各个流浏览器)
今天工作中遇到个问题，问题是这样的，一个form表单中有比较多的input标签，因为form中的input标签中的值都需要前端做客户端校验，由于本人比较懒而且特不喜欢用循环给
每个input元素添加blur事件处理，感觉这样有损专业前端形象！想过用事件委托，然而focus、blur事件利用冒泡机制搞事件委托行不通啊，父级元素不支持focus、blur咋办？？？？
由此引发了对此问题的思考，人生就是这样，总觉得自己NB的不行，感觉自己什么都会，然而你在没遇到boss的时候打着小怪一直都会觉得自己天下无敌，遇到了才发现自己其实不会
的东西还有很多...不过这也是好事，因为自己在遇到问题之后才会放下自以为是，才会不断的去学习，不断的成长!
好了进入正题，既然遇到问题了就得想办法解决经过寻师访友终于找到了解决的办法，在此记录下来以防自己以后忘记，记笔记也能加深自己对问题的记忆和理解。
PXJSFrame.readyEvent(function(){
var _e = PXJSFrame.Event,_dom = PXJSFrame.DOM;
var wrap = _dom.getById('container');
if(_e.isIE){
/*
对于低版本的IE浏览器因为他们不支持事件捕获，而他们支持focusin、focusout事件
使用该事件加事件委托能解决低版本IE的focus、blur事件委托的问题
*/
_e.addEvent(wrap,'focusout',handler);
}else{
/*
高版本的IE浏览器以及主流标准浏览器则可以利用事件捕获机制来解决
*/
_e.addEvent(wrap,'blur',handler,true);
}
function handler(event){
var tar = _e.getTarget(event);
if(tar.nodeName.toLowerCase()=='input'){
if(!tar.value){
var txt = _dom.getText(_dom.prevEle(tar)[0]);
txt = txt.substr(0,txt.length-1);
tar.focus();
alert(txt+'不能为空!');
}
}
}
});
HTML代码如下:
<body>
<div id="container">
<ul>
<li><label>用 户 名:</label><input type="text" /></li>
<li><label>密 码:</label><input type="password" /></li>
<li><label>确认密码:</label><input type="password" /></li>
<li><label>验 证 码:</label><input type="text" /></li>
</ul>
</div>
</body>
经过在ie6、ie11、chrome、firefox等浏览器的测试完全达到了预期的效果，这样处理之后心里果然舒服多了哈哈哈哈，在此分享出来供烦恼于此的小伙伴们一起享用！
如果什么错误之处 还请各位大神多多指点~！小弟在此受您一拜！
focus、blur事件的事件委托处理(兼容各个流浏览器)的更多相关文章
- form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的on ...
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...
- onfocus事件,onblur事件；Focus()方法,Blur()方法
<1> <pre name="code" class="html"><!DOCTYPE html PUBLIC "-// ...
- jQuery - focusin/focusout/focus/blur事件的区别与不同
focus与blur事件:不支持冒泡 focusin与focusout:支持冒泡 事件触发顺序: 对于同时支持这4个事件的浏览器,事件执行顺序为focusin(聚焦) > focus > ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
随机推荐
- 九度OJ题目1137：浮点数加法 (JAVA)使用BigDecimal四个案例都通过了，但是超时了。
题目描述: 求2个浮点数相加的和 题目中输入输出中出现浮点数都有如下的形式: P1P2...Pi.Q1Q2...Qj 对于整数部分,P1P2...Pi是一个非负整数 对于小数部分,Qj不等于0 输入: ...
- 在LaTeX 与 LyX 中设置“Contents”为“目录”
在 LaTeX 中,目录一般被显示为英文"Contents",因此需要设置成"目录". 通常在 Preamble 按照如下方式设置: \renewcommand ...
- vector 对象中存放指针类型数据
<<C++ Primer>> 第四版Exercise Section 5.6 的5.1.6 有一道题是这样的:编写程序定义一个vector对象,其每个元素都是指向string类 ...
- python + selenium <一>
python 安装 python 下载地址: http://python.org/getit/ ez_setup.py 下载地址: https://pypi.python.org/packages/s ...
- unittest单元测试框架实现参数化
当我们在使用TestNG时,发现它有一个非常好用的参数化功能.当你的测试用例有固定的参数和断言结果时,它可以相似用例的节省用例的个数. 例子如下: import static org.testng.A ...
- 图解Javascript——作用域、作用域链、闭包
什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...
- GitHub开源：升讯威ADO.NET增强组件 sheng.ADO.NET.Plus V1.3
GitHub: https://github.com/iccb1013/sheng.ADO.NET.Plus 早前分享过,当时没有把代码上传到Github,只是通过邮件的形式分享给了部分需要的朋友,最 ...
- 初识 Javascript.02 -- Date日期、Math对象、数据类型转换、字符串、布尔Boolean、逻辑运算符、if else 、三元表达式、代码调试方法、
Date()对象: Date对象用于处理日期和时间. 1.1 Math对象 ◆Math.ceil() 天花板函数 向上取整 只取整数,不足则进1 ◆Math.floor() 地板函数 ...
- （转）KMP算法实现。超级赞！见过的最容易理解的
网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初我入门时看的博客吧:http://www.cnblogs.com/yjiyjige/p/3263858.html这位同学用详细 ...
- js的搜索遍历精讲
搜索算法应该算是每种算法的重点与难点了,本文将讲解JavaScript中的各种常用的遍历算法:希望对大家有所帮助. 深度优先遍历顺序:1245367 广度优先遍历:1234567 1.深度优 ...