js中如何在不影響既有事件監聽的前提下新增監聽器

標籤：on()   res   add   事件   cto   就是   return   監聽   roc   

一. 需求澄清

比如某個按鈕已經綁定了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中如何在不影響既有事件監聽的前提下新增監聽器