javascript 自定義事件

// 自定義事件 建立一個管理事件的對象 , 讓其餘對象監聽那些事件
        class EventTarget {
            constructor(handlers) {
                this.handlers = {};
            }
            addHandler(type, handler) {
                if (typeof this.handlers[type] == 'undefined') {
                    this.handlers[type] = []
                }
                this.handlers[type].push(handler)
            }
            fire(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(type, handler) {
                var handlers = this.handlers[type];
                for (var i = 0; i < handlers.length; i++) {
                    if (handlers[i] == handler) {
                        break
                    }

                }
                handlers.splice(i, 1);
            }
        }
      function handleMessage(event) {
            alert('Message received' + event.message); // Message receivedHello World
        }


        var target = new EventTarget();

        target.addHandler('message', handleMessage); //綁定事件

        target.fire({ type: 'message', message: 'Hello World' }) // 觸發事件

        target.removeHandler('message', handleMessage); // 刪除事件
複製代碼

事件繼承bash

class Person extends EventTarget { // 繼承
            constructor(fire, name, age) {
                super(fire);
                this.name = name
                this.age = age
            }
            say(message) {
                this.fire({ type: 'message', message: message })
            }
        }
        
        function handleMessageCall(event) {
            alert(event.target.name + " says: " + event.message); // 100 says: Hi there.
        }

        var person = new Person('libai', 100)
        person.addHandler("message", handleMessageCall);
        person.say('Hi there.')
複製代碼
相關文章
相關標籤/搜索