addEvent完美封装（addEventListener兼容性封装）

addEventListener兼容各大浏览器封装

封装：addEvent.js

/**
* element           要绑定事件的对象，及HTML节点。
* type              事件名称，attachEvent监听的事件前边的加上“on”，比如“onclick”和“onmouseover”，addEventListener与之相反。
* listener          要绑定的事件监听函数
*/const addEvent = function({element, type, callback}) {if (element.addEventListener) { // 支持使用 addEventListener()if (type.slice(0,2) === "on") // 以 "on" 开头，不需要，则去掉type = type.slice(2);element.addEventListener(type, callback);} else if (element.attachEvent) { // 支持使用 attachEvent()if (type.slice(0, 2) !== "on") // 没有以 "on" 开头，需要，则加上type = "on" + type;element.attachEvent(type, callback);}else{type.slice(0, 2) !== "on" ? element['on'+ type] = callback : element[type] = callback;}
}
export default addEvent;

其他js引入

import addEvent from "@/public/js/addEvent"
addEvent({element: window, type: 'scroll', callback: debounce(buriedPoint, 1000)  // or buriedPoint}); //滚动事件

addEvent完美封装（addEventListener兼容性封装）相关推荐

IRFR3704Z替代兼容型号DC005NG-I，完美替换IRFR3704Z，封装TO-252
IRFR3704Z替代兼容型号DC005NG-I,完美替换IRFR3704Z,封装TO-252 型号:DC005NG-I N管电压电流:30V90A 内阻:RDS(ON)<4.5mΩ@VGS= ...
js 兼容性封装获取第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...
【关于封装的那些事】缺失封装【关于封装的那些事】泄露的封装【关于封装的那些事】不充分的封装【图解数据结构】二叉查找树【图解数据结构】二叉树遍历...
[关于封装的那些事] 缺失封装目录 - 缺失封装为什么不能缺失封装? 缺失封装潜在的原因未意识到关注点会不断变化混合关注点幼稚的设计决策示例分析一示例分析二总结缺失封装没有将实现变 ...
EEP封装？METS封装？还是ZIP封装？
档案信息化行业的老兵想必对10多年前的EEP封装包印象深刻,其自包含.自描述.自证明的"洋葱结构"曾经火遍大江南北,为电子文件的真实性和完整性保证提供了一种重要手段,但其过分严谨刻 ...
Java的知识点31——封装拷贝、封装释放、实现放大器对声音的放大功能
封装拷贝.封装释放 package cn.dym;import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; ...
网络编程数据的封装与解封装过程
文章目录数据封装过程数据解封装过程数据封装过程数据解封装过程参考文章:封装与解封装
ec200s 封装_什么是无闪退免签封装？免签封装如何实现？
因为ios签名是内测分发必须进行的一项操作, 相信ios开发者们对ios签名还是非常熟悉的,ios系统中App是可以通过ios签名的方式将未上架苹果应用商店App安装到苹果手机上:那么未开发App的网 ...
理解OSI七层模型（了解OSI七层模型，数据如何传输，封装，解封装）
文章目录理解OSI七层模型什么是OSI七层模型理解OSI七层模型举例子七层协议,分析过程: 数据传输过程封装数据解封装数据数据是如何封装和解封装理解OSI七层模型第一层:物理层. ...
TCP/IP五层模型（五层因特网协议栈）||| OSI参考模型|||数据的封装与解封装
目录一.TCP/IP五层模型: 网络设备分布: 数据的封装与解封装: 二.OSI参考模型区别与联系: 注: ICMP中echol作用: 怎么区分TCP连接: 详解: (33条消息) TCP/IP五 ...

addEvent完美封装（addEventListener兼容性封装）

addEventListener兼容各大浏览器封装

addEvent完美封装（addEventListener兼容性封装）相关推荐

最新文章

热门文章