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

來源:互聯網
上載者:User

標籤: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中如何在不影響既有事件監聽的前提下新增監聽器

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.