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题目1443：Tr A (JAVA)
题目描述: A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. 输入: 数据的第一行是一个T,表示有T组数据. 每组数据的第一行有n(2 <= n & ...
- 机器学习基石 2 Learning to Answer Yes/No
机器学习基石 2 Learning to Answer Yes/No Perceptron Hypothesis Set 对于一个线性可分的二分类问题,我们可以采用感知器 (Perceptron)这种 ...
- 关于Tarjan(2)
Tarjan有第二个神奇的用法,求强连通分量!!!!!!!!!!!!!!!!!!! 同样利用了dfn:dfs序,low:能回到的最早祖先的dfn: 废话少说 上板子 #include<iostr ...
- node.js平台下Express的session与cookie模块包的配置
首先下载两个模块包 session模块包:用于保持登录状态或保持会话状态等. npm install express-session --save-dev cookie模块包:用于解析cookie. ...
- Linux 下使用网易的SMTP服务器 发送邮件
最近在研究服务器高可用集群 (HA)…… 尝试配置keepalived, 却发现其全局配置(global_defs )中发送邮件的SMTP服务器配置只有简单 smtp_server 一个选项. 那么, ...
- python如何保证输入键入数字
要求:python写一个要求用户输入数字,如果不是数字就一直循环要求输入,直到输入数字为止的代码 错误打开方式: while True: ten=input('Enter a number:') if ...
- Frame框架
框架 frameset 框架集 如果使用框架集,当前页面不能有body cols="300,*" :左右拆分,左边宽300,右边宽剩余 rows=" ...
- 相机标定：kalibr标定工具箱使用总结
1 多相机标定 1.1采集图像和IMU 1.2制作Bag包 1)组织文件结构 ~/kalibr_workspace/test/stereo_calib bagsrc cam0 (1+time(0))* ...
- git 入门宝典
本篇教程是按照我自己的组织方式,然后从多篇教程中拼凑出来的,嘎嘎~,真佩服自己的技术! 原本想叫 git 宝典的,结果一查git的命令大全,还有那么多的git命令与功能没有接触到,所以...还是谦虚一 ...
- 我所理解的javascript中函数的作用域和作用域链
本文为原创,转载请注明出处: cnzt 文章:cnzt-p 写在前面 一周木有更新了,今天终于攻克了自行车难关,非常开心,特意来一更~ (那些捂嘴偷笑的人我看到你们了快把嘴闭上我会假装没看 ...