js簡易版自定義事件及其應用

2022-03-09 23:48:27 字數 1389 閱讀 3808

老話題,關於js的自定義事件,用處很多(控制項控都懂的..),最明顯的是實現觀察者模式.

簡易版**:

view code 

1


function class1() 


3     class1.prototype = 


10             } 


11         }, 


12//


新增事件處理函式 


13         attchonevt : function(_eventhandler), 


18//


刪除 19         detachonevt : function(_eventhandler)        


22     } 


2324


//包裝下事件處理函式,使其可以接收引數 


25function makefunc(obj,strfunc) 


32return


呼叫具體處理函式 


34         } 


3536     } 


3738


//處理函式-路人甲 


39function _eventfunc(sname) 


4243


//test 


44var obj = new class1(); 


45     obj.attchonevt(makefunc(null, "_eventfunc", "kobe")); 


46     obj.evt(); 


47     obj.detachonevt(makefunc(null, "_eventfunc", "kobe")); 


48     obj.evt();
jq提供了實現自定義事件的函式.主要是bind,unbind,trigger顧名思義就是用來實現事件繫結以及觸發.

比較簡單,直接上**(列子是實現觀察者模式),具體使用查api

view code 

1


//被觀察物件


2var subject = ;    


4 $(subject).bind("evthandler",function(event,sname))78


//觀察者


9var observer = ;


12//


訂閱事件


13 observer.regist = function())


18 } 


19 observer.regist();


2021


//觸發事件


22 $(subject).trigger("evthandler",["num1"]);
其他:關於jq的事件處理實現細節可以檢視源**,園子裡有個原始碼分析系列的,偷懶的話可以看看.

js自定義事件

使用event let myevent new event event name 為了能夠傳遞引數，使用customevent let mycusevent new customevent event name customenent的另種寫法 首先建立自定義事件物件 let event docum...

js自定義事件

customevent event new customevent typearg,1.用法 定義事件 var event new customevent student 監聽事件 domelement.addevent student function e 觸發事件，同乙個監聽的dom元素，dis...

js自定義事件

自定義事件的本質，建立乙個物件，然後把事件的名字作為物件的乙個屬性，然後value是乙個,把此事件的所以 都push進去。寫乙個很基本的，沒有把物件暴露出去的js的自定義事件。1 varevent function 3var addevent function type,cb 7return obj...