js中如何在不影响既有事件监听的前提下新增监听器
一. 需求澄清
比如某个按钮已经绑定了2-3个对Window
对象的load
事件的监听,现在需要添加一个新的对click
事件的监听器,但在一定条件下才会同时触发原有的2-3个load
监听器,否则只触发新添加的这个事件。
假定新添加的监听函数为:
function additionalListener(){
console.log('should do something else');
}
二. ES5方法
ES5
中可以通过添加包装函数的方式来实现:
_windowonload = window.onload;
window.onload = function(){
additionalListener();
if (someCondition){
_windowonload();
}
}
三. ES6方法
ES6
中添加的代理对象Proxy
也可以用来实现这个需求,基本逻辑就是实现了对window.onload
的调用劫持:
var onloadProxy = new Proxy(window.onload,{
apply:function () {
additionalListener();
Reflect.apply(...arguments);
}
});
window.onload = onloadProxy;
四. AOP方法
AOP
,即面向切面编程,从元编程的角度来实现链式调用(建议一般编程人员不要在原生对象上添加新特性),实现的逻辑就是在函数的原型对象上添加after
方法,它接收一个函数作为参数,在函数被调用时先调用原函数,再调用after
方法传入的方法,最后返回原函数的执行结果:
Function.prototype.after = function (afterFn) {
return () => {
const result = this.apply(this, arguments);
afterFn.apply(this,arguments);
return result;
}
}
window.onload = window.onload.after(additionalListener);
js中如何在不影响既有事件监听的前提下新增监听器的更多相关文章
- 简单剖析Node中的事件监听机制(一)
使用js的class类简单的实现一个事件监听机制,不同于浏览器中的时间绑定与监听,类似于node中的时间监听,并且会在接下来的文章中去根据自己的理解去写一下Event模块中的原理. Node.js使用 ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- JS 中的事件绑定、事件监听、事件委托是什么?
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
随机推荐
- 锐捷交换机配置DHCP SERVER给固定的MAC地址分配静态IP
今天突发奇想,想给自己的手机分配固定地址,使得接入公司无线网络时每次都取到同一ip地址,这样可以排除认证登录问题. 上网溜达一下,记录下锐捷官方的[常见问题]如下,经验证可行. 需求: 给MAC地址为 ...
- 我和python的初相识
认识Python是大二的选修 单纯只是想赚学分而已 后来觉得越来越有趣. 一.python简介 简单来说Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python 的设 ...
- js的七大设计原则--迪米特原则
一.什么是迪米特原则 迪米特原则也叫最少知道原则,一个类应该对其他对象保持最少的了解.通俗来讲,就是一个类对自己依赖的类知道的越少越好.因为类与类之间的关系越密切,耦合度越大,当一个类发生改变时,对另 ...
- Katalon Studio之接口测试中token处理
前言 最近抽时间接触了一下Katalon Studio(后面简称KS),并且利用KS做了一些接口测试的试验,感觉还不错,不过其中接口授权中缺少通过token动态验证的方案,虽然KS支持Authoriz ...
- vue单页面应用刷新网页后vuex的state数据丢失的解决方案
1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...
- mysql数据库的基本操作:索引、视图,导入和导出,备份和恢复
1.索引: 索引是一种与表有关的结构,它的作用相当于书的目录,可以根据目录中的页码快速找到所需的内容. 当表中有大量记录时,若要对表进行查询,没有索引的情况是全表搜索:将所有记录一一取出,和查询条件进 ...
- Web发展史
Web 万维网常称为WWW(World Wide Web)发展至今仅30年,英国计算机科学家,蒂姆 伯纳斯 李爵士 提出了 World Wide Web的设计方案,1990年李爵士完成了Web 所有的 ...
- python语法_模块_loggin_hashlib_conifgparser
loggin模块 日志模块,级别从上往下依次增强,debug 和 info 默认不输出信息,只有后三种级别有输出信息 loggin.debug('') loggin.info('') loggin.w ...
- ABP入门系列(4)——创建应用服务
ABP入门系列目录--学习Abp框架之实操演练 一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相 ...
- vue项目实践-前后端分离关于权限的思路
前后端分离后权限的思路 最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案. 前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好 我 ...