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移除事件監聽器。