javascript委托(Delegate)blur和focus用法实例分析


Posted in Javascript onMay 26, 2015

本文实例讲述了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>

例子2(表单类):

<form id="表单">

  <input type="text" id="文本框" />

  其他表单项

</form>

这里我们监听的是最外层的ol区块,如果我们用blur和focus事件,只是针对的是这整个的ol的,那么里面控件的focus和blur事件怎么处理呢?

处理方式如下:

IE处理:

$('列表').onmouseover = handleMouseOver;

$('列表').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);

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
js实现自定义右键菜单
May 18 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
javascript删除元素节点removeChild()用法实例
May 26 #Javascript
JavaScript事件委托实例分析
May 26 #Javascript
JQuery选择器、过滤器大整理
May 26 #Javascript
javascript字符串与数组转换汇总
May 26 #Javascript
javascript获取文档坐标和视口坐标
May 26 #Javascript
浅谈javascript事件取消和阻止冒泡
May 26 #Javascript
javascript事件冒泡和事件捕获详解
May 26 #Javascript
You might like
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
Yii分页用法实例详解
2014/12/04 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
深入探究Django中的Session与Cookie
2017/07/30 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python实现websocket的客户端压力测试
2019/06/25 Python
django序列化serializers过程解析
2019/12/14 Python
pytorch 求网络模型参数实例
2019/12/30 Python
QML用PathView实现轮播图
2020/06/03 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
应聘文员自荐信范文
2014/03/11 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
司机岗位职责范本
2015/04/10 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
时尚女魔头观后感
2015/06/04 职场文书
关于童年的读书笔记
2015/06/26 职场文书
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS