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有一年 ...
随机推荐
- VUE-利用OSS BrowserJS-SDK实现阿里OSS前端上传
项目中遇到利用阿里OSS上传文件,线上很多示例用到了各种SDK,却没有看到OSS BrowserJS-SDK相关示例,鉴于脑子不好使,记一下. 封装upload相关组件  使用npm安装SDK的开发 ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- h5直接分享的实现方案
首先得知道,h5是无法直接通过js跳转到微信或QQ等软件进行分享, 参照新浪的分享方式,在uc浏览器和QQ浏览器等主流浏览器中是可以直接分享的, 原因是uc浏览器和QQ浏览器这样的主流浏览器是自带分享 ...
- AJAX-同源策略 跨域访问
## 同源策略 概述: 同源策略是浏览器的一种安全策略,视为同源是指域名,协议,端口完全相同.只有同源的地址才可以通过AJAX方式请求.同源或者不同源说的是两个地址的关系,不同源地址之间请求我们称之为 ...
- threejs立方体贴图产生边缘锯齿问题
threejs立方体贴图产生边缘锯齿问题 立方体贴图边缘锯齿 解决后 经过试验测试发现, textureGrass.wrapS和 textureGrass.wrapT属性导致的. 解决方法1: 删掉t ...
- 最新手机号正则表达式 java 、javascript版正则表达式验证是否为11位有效手机号码
最近在做注册登陆页面,都要涉及到验证11位有效手机号码,这里贴出代码,希望能帮到有这个开发需求的朋友. function isPoneAvailable($poneInput) { var myreg ...
- Java构造方法、成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的?
[Java笔试真题]:构造方法.成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的? [解答]:当类第一次被加载的时候,静态变量会首先初始化,接着编译器会把实例变量初始化为默认值,然后执行构 ...
- Web前端-Vue.js必备框架(四)
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- [Swift]LeetCode134. 加油站 | Gas Station
There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...
- [Swift]LeetCode556. 下一个更大元素 III | Next Greater Element III
Given a positive 32-bit integer n, you need to find the smallest 32-bit integer which has exactly th ...