js中如何在不影响既有事件监听的前提下新增监听器
2023-09-14 09:06:00 时间
【摘要】 本文为笔者学习过程中的随笔记录。
一. 需求澄清
比如某个按钮已经绑定了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);
来源:华为云社区 作者:大史不说话
相关文章
- ActiveX(二)Js 监听 ActiveX中的事件
- 结合Vue.js的前端压缩图片方案
- js中Blob基本用法
- JS - console多个值
- Node.js之HTTP请求与响应
- 《Ext JS 4 First Look》翻译之三:布局
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
- js/bat批处理调用谷歌浏览器chrome批量打开网页测试web性能
- js获取上传视频播放时间
- 如何查找元素对应事件的js代码
- 原 JS监听回车事件
- js响应鼠标滚轮事件
- js 事件冒泡和默认行为
- vue.js开发SPA常见问题及解决方法
- 原 JS监听回车事件
- Atitit.js的键盘按键事件捆绑and事件调度
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- js手机端长按选中文字执行事件
- js添加点击事件
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- Node.js 博客实例(一)简单博客
- JS实现双击内容变为可编辑状态
- 一道题解释 js 的词法作用域
- How to set up a Headless Chrome Node.js server in Docker
- JS ready和onload事件 比较分析
- JS事件篇