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>

例子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 事件参考手册
对于js的一些常见事件的总结
2008-12-12
简单实现JavaScript弹幕效果
这篇文章主要帮助大家简单实现JavaScript弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript实现选择框按比例拖拉缩放的方法
这篇文章主要介绍了JavaScript实现选择框按比例拖拉缩放的方法,具有等比例缩放及设置最小范围等功能,涉及javascript事件的添加、监听、页面元素动态操作及鼠标事件的响应等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
ES6新增的数组知识实例小结
这篇文章主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下
2020-05-05
bootstrap Table插件使用demo
本篇文章主要介绍了bootstrap Table插件使用demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JavaScript中数组随机排序的实现详解
这篇文章主要为大家详细介绍了JavaScript中数组随机排序的实现，主要是利用原地算法和sort/shuffle算法，感兴趣的小伙伴可以跟随小编一起学习一下
2022-11-11
xcode中获取js文件的路径方法(推荐)
下面小编就为大家带来一篇xcode中获取js文件的路径方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript实现烟花特效(面向对象)
这篇文章主要为大家详细介绍了JavaScript使用面向对象编程实现烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
微信小程序页面滚动到指定位置代码实例
这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
js通过googleAIP翻译PHP系统的语言配置的实现代码
一同事弄了个系统是php写的，虽然是多语言但没中文！他打算手动翻译2000多个语言配置，真是佩服，知道后想了想，应该有好的法办
2011-10-10

最新评论