js發起自定義事件CustomEvent

最近一個專案中需要模擬發起一個掃碼槍事件進行測試，之前寫react native呼叫DeviceEventEmitter這個api就可以了，然而在web中不太常用，最終在mdn中發現了這個構造方法CustomEvent

發起事件

用法

new CustomEvent(eventName, params);

示例

建立一個自定義事件

const event=new CustomEvent('mock-event');

傳遞引數

這裡值得注意，需要把想要傳遞的引數包裹在一個包含detail屬性的物件，否則傳遞的引數不會被掛載？（這裡不太確定，我試過傳id和params都不會生效）

function createEvent(params, eventName = 'mock-event') {
    return new CustomEvent(eventName, { detail: params });
}

const event = createEvent({ id: '0010' });

發起事件

呼叫dispatchEvent方法發起事件，傳入你剛才建立的方法

window.dispatchEvent(event);

監聽事件

 window.addEventListener('mock-event', ({ detail: { id } }) => {
            console.log('id',id) // 會在控制檯列印0010
        });

在react中的應用

最好在componentDidMount中呼叫addEventListener監聽事件，在componentWillUnmount中呼叫removeEventListener移除事件監聽器。