原生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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
简单实现js倒计时功能
Feb 13 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
微信小程序实现轮播图指示器
Jun 25 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
php木马攻击防御之道
2008/03/24 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
人力管理专业毕业生求职信
2014/02/27 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
勇敢的心观后感
2015/06/09 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书