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 对象,当事件 ...
随机推荐
- 用TTL线在CFE环境下拯救半砖wrt54g路由器
缘起:路由器被刷成半砖 Linksys wrt54gs v4路由器,已刷入 tomato-dualwlan 1.23.使用数年,未出现任何故障. 在日用的wifi网络上,通过web界面刷入了错误的to ...
- JDBC整合c3p0数据库连接池 解决Too many connections错误
前段时间,接手一个项目使用的是原始的jdbc作为数据库的访问,发布到服务器上在运行了一段时间之后总是会出现无法访问的情况,登录到服务器,查看tomcat日志发现总是报如下的错误. Caused by: ...
- JavaWeb之Ajax
一.什么是Ajax 1.1.Ajax的定义 Ajax:(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML 不是一种新的编程语言,而是一种用于创建 ...
- Thread.join()的使用
代码清单: package com.baidu.nuomi.concurrent; import java.util.concurrent.TimeUnit; /** * Created by son ...
- 记一次企业级爬虫系统升级改造（六）：基于Redis实现免费的IP代理池
前言: 首先表示抱歉,春节后一直较忙,未及时更新该系列文章. 近期,由于监控的站源越来越多,就偶有站源做了反爬机制,造成我们的SupportYun系统小爬虫服务时常被封IP,不能进行数据采集. 这时候 ...
- (29)网络编程之TCP通信协议
TCP通信协议特点: 1.tcp协议是基于IO流进行数据的传输,是面向链接的. 2.tcp进行数据传输的时候,数据没有大小限制的. 3.面向链接,通过三次握手的机制,保证数据的完整性,是一个可靠的协议 ...
- java中有符号和无符号数据类型发生转换
package com.itheima.test01;/* * byte short int long float double 是有符号位的数 * char boolean 是无符号位的数 * 补码 ...
- 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...
- 微服务--webapi实现，脱离iis，脱离tomcat
前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...
- AP付款出现（-1）例外处理
---手工处理方法---1.根据收款编号查询事件表中的"事件ID"---2.将AP_CHECKS_ALL表中的PAYMENT_TYPE_FLAG 标记由"Q"更 ...