原生js事件的添加和删除的封装


Posted in Javascript onJuly 01, 2014

在IE浏览器中添加或删除事件用attachEvent、detachEvent。在其他标准浏览器中则用addEventListener、removeEventListener。下面的对事件的添加和删除做了封装。直接看代码吧!

/**
* @description 事件绑定,兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除,兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

其他补充关于addEventListener第三个参数的含义

addEventListener的第三个参数

W3C DOM里用来新增触发事件的函数叫AddEventListener,不过我一直不知道这个函数的第三个参数是要做什么用的,总是随便设,也没发现差异再哪,前两天看ppk on javascript终于看到说明了,至于很久以前就有的DOM的标准文件,我其实根本没去找过这个参数的资讯。

这个参数叫做useCapture,是一个boolean值,就是true or false,如果送出true的话就是浏览器会使用Capture方式,false的话是Bubbling,只有在特定状况下才会有影响,通常建议是false,而会有影响的情形是目标元素(target element)有祖先元素(ancestor element),而且也有同样的事件对应函数,我想,看图会比较清楚。

原生js事件的添加和删除的封装

范例有两层的div方块

像这张图所显示的,我的范例有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发红色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture,和bubbling相反是由外而内,会先执行红色元素的click事件才执行蓝色元素的click事件。附上两个范例,capture和bubbling,两个档案只有差在此一参数不同,可以发现事件的发生顺序不一样了。

那如果不同层的元素使用的useCapture不同呢?就是会先从最外层元素往目标元素寻找设定为capture的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling的事件。

Javascript 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
jQuery的:parent选择器定义和用法
Jul 01 #Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 #Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 #Javascript
jquery实现图片按比例缩放示例
Jul 01 #Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 #Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 #Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 #Javascript
You might like
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python实现感知机模型的示例
2020/09/30 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
Shell编程面试题
2012/05/30 面试题
物流经理自我评价
2013/09/23 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
连带责任保证书
2014/04/29 职场文书
三八妇女节活动总结
2014/05/04 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
数据设计之权限的实现
2022/08/05 MySQL