事件是一種叫做觀察者的設計模式,觀察者模式由兩類對象組成：主體和觀察者。主體負責發布事件，同時觀察者通過訂閱這些事件來觀察該主體。拿DOM來說，DOM就是主體，事件處理代碼便是觀察者。

下面是一個自定義事件，

function EventTarget() {this.handlers = {}; } EventTarget.prototype = {constructor: EventTarget,addHandler: function (type, handler) {if (typeof this.handlers[type] == 'undefined') {this.handlers[type] = [];}this.handlers[type].push(handler);},fire: function (event) {if (!event.target) {event.target = this;}if (this.handlers[event.type] instanceof Array) {var handlers = this.handlers[event.type];for (var i = 0, len = handlers.length; i < len; i++) {handlers[i](event);}}},removeHandler: function (type, handler) {if (this.handlers[type] instanceof Array) {var handlers = this.handlers[type];for (var i = 0, len = handlers.length; i < len; i++) {if (handlers[i] === handler) {break;}}handlers.splice(i, 1);}} }自定義事件的調用,addHandler() 添加事件,fire() 執行事件,removeHandler() 刪除綁定的事件。

function handleMessage1(event) {console.log("111--", event.message); } function handleMessage2(event) {console.log("222--", event.message); } var target = new EventTarget(); // 添加事件 target.addHandler('message', handleMessage1); target.addHandler('message', handleMessage2); // 執行事件 target.fire({type: 'message',message: 'hello!' })// 刪除事件 target.removeHandler('message', handleMessage1); // 執行事件 target.fire({type: 'message',message: 'holy' })

總結

以上是生活随笔為你收集整理的观察者模式和js自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。