原生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 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 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自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
js实现文字截断功能
2016/09/14 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python定向爬取淘宝商品价格
2018/02/27 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
国际商务专业求职信
2014/07/15 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
用python实现监控视频人数统计
2021/05/21 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js