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 对象,当事件 ...
随机推荐
- iOS截屏保存至相册
#pragma mark 截屏并保存至相册 -(void)screenShotsComplete:(void(^)(UIImage * img)) complete { CGSize imageSiz ...
- conky 1.10以后的新配置格式
包装 config conky.config = { ... } 包装 TEXT conky.text = [[ ... ]] 每个 config 选项的变量和取值之间插入 "=" ...
- java-信息安全（四）-数据签名、数字证书
概述 信息安全基本概念: 数字签名 数字证书 数字签名 数字签名(又称公钥数字签名.电子签章)是一种类似写在纸上的普通的物理签名,但是使用了公钥加密领域的技术实现,用于鉴别数字信息的方法.一套数字签名 ...
- UWP--集合绑定数据
使用 ObservableCollection 列表控件主要是 ListBox.ListView.GridView 等. 为列表控件绑定数据不再是为 DataContext 属性赋值,应该使用列表 ...
- HTML页面内容禁止选择、复制、右键
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectst ...
- oracle表空间创建
/*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9 ...
- ubuntu-terminal快捷键
常用快捷键功能:Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ctrl+d 删除当 ...
- ES6 学习笔记（一）let，const和解构赋值
let和const let和const是es6新增的两个变量声明关键字,与var的不同点在于: (1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效.va ...
- 腾讯云数据库团队：PostgreSQL TOAST技术理解
作者介绍:胡彬 腾讯云高级工程师 TOAST是"The Oversized-Attribute Storage Technique"的缩写,主要用于存储一个大字段的值.要理解TOA ...
- window7使用svn（svn系列 客户端 知识二总结）
♣eclipse插件subclipse ♣TortoiseSVN ♣svn操作 ♣注意事项 使用svn可以在eclipse直接装subclipse或者在windows使用TortoiseSVN ...