javascript委托(Delegate)blur和focus用法实例分析
更新时间：2015年05月26日 15:31:20 作者：忆梦
这篇文章主要介绍了javascript委托(Delegate)blur和focus用法,实例分析了javascript委托的用法及针对常见浏览器的使用技巧,需要的朋友可以参考下
本文实例讲述了javascript委托(Delegate)blur和focus用法。分享给大家供大家参考。具体分析如下：
Opera (9.5b) 对于所有的focus和blur事件，不能正确的触发两次；
因此，focus和blur事件的处理函数可以被委派到事件的捕获阶段。
例子1（列表类）：
复制代码 代码如下:
<ol id="列表">
<li><a href="#">列表项1</a>
<ol>
<li><a href="#">列表项1.1</a></li>
<li><a href="#">列表项1.2</a></li>
<li><a href="#">列表项1.3</a></li>
</ol>
</li>
其他列表项
</ol>
<li><a href="#">列表项1</a>
<ol>
<li><a href="#">列表项1.1</a></li>
<li><a href="#">列表项1.2</a></li>
<li><a href="#">列表项1.3</a></li>
</ol>
</li>
其他列表项
</ol>
例子2（表单类）：
复制代码 代码如下:
<form id="表单">
<input type="text" id="文本框" />
其他表单项
</form>
<input type="text" id="文本框" />
其他表单项
</form>
这里我们监听的是最外层的ol区块，如果我们用blur和focus事件，只是针对的是这整个的ol的，那么里面控件的focus和blur事件怎么处理呢？
处理方式如下：
IE处理:
复制代码 代码如下:
$('列表').onmouseover = handleMouseOver;
$('列表').onmouseout = handleMouseOut;
$('列表').onfocusin = handleMouseOver;
$('列表').onfocusout = handleMouseOut;
$('列表').onmouseout = handleMouseOut;
$('列表').onfocusin = handleMouseOver;
$('列表').onfocusout = handleMouseOut;
也可以写成下面的形式:
复制代码 代码如下:
$('列表').attachEvent('onfocusout',handleMouseOut,true);
如果想要传递参数，可以加个中间函数，例如
复制代码 代码如下:
$('列表').attachEvent('onfocusout',function(event, myparams){handleMouseOut(event, myparams);},true);
FF处理:
复制代码 代码如下:
$('列表').addEventListener('focus',handleMouseOver,true);
$('列表').addEventListener('blur',handleMouseOut,true);
$('列表').addEventListener('blur',handleMouseOut,true);
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
- AngularJS ng-blur 指令详解及简单实例
- 老生常谈onBlur事件与onfocus事件(js)
- jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
- Js中的onblur和onfocus事件应用介绍
- AngularJS Controller作用域
- JS 实现计算器详解及实例代码（一）
- JSP页面跳转方法小结
- 详解js中==与===的区别
- js时间控件只显示年月
- java后端把数据转换为树,map递归生成json树,返回给前端(后台转换)
- 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
- JS实现iframe自适应高度的方法示例
- Javascript blur与click冲突解决办法
- jsp页面显示数据库的数据信息表
相关文章
下面小编就为大家带来一篇js添加事件的通用方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了js实现详情页放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家详细介绍了小程序实现搜索界面，小程序实现推荐搜索列表效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
新接了项目，遇到这样的需求，通过后端接口下载excel文件，后端没有文件地址，返回二进制流文件。接下来通过实例代码给大家分享前端axios下载excel文件(二进制)的处理方法，一起看看吧2018-07-07
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JavaScript预解析及相关技巧,结合实例形式分析了JavaScript与解析的原理,步骤与相关技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了js仿淘宝放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JS长整型精度问题,实例分析了Java项目结合前台js脚本出现的长整型精度问题与相应的解决方案,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这段时间接了一个微信小程序项目,从此打开小程序的新世界大门,下面这篇文章主要给大家介绍了关于小程序中监听页面滚动的几种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
以下是从网上找到的一段JavaScript实现图形报表的代码，对于想客户端显示报表的朋友可以参考下。2009-12-12
最新评论