原生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 相关文章推荐
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
一个Python最简单的接口自动化框架
2018/01/02 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python实现交并比IOU教程
2020/04/16 Python
精彩的大学生自我评价
2013/11/17 职场文书
超级搞笑检讨书
2014/01/15 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
党支部书记先进事迹
2014/01/17 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
公司收款委托书范本
2014/09/20 职场文书
停电调休通知
2015/04/16 职场文书
公历12个月名称的由来
2022/04/12 杂记