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 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
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的栏目导航程序
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
模具专业推荐信
2013/10/30 职场文书
最新自我评价范文
2013/11/16 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
单位考核聘任报告
2015/03/02 职场文书
复兴之路观后感
2015/06/02 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python