[可乐的随手记 - 5] Custom Event & dispatchEvent

场景一

拦截所有对 localStorageChange 的设置

// trigger Custom Event
const orignalSetItem = localStorage.setItem;
localStorage.setItem = function (key, newValue) {
    const customEvent = new Event("localStorageChange", {
      bubbles: false,
    });
    customEvent.newValue = newValue;
    window.dispatchEvent(customEvent);
    orignalSetItem.apply(this, arguments);
}

// listen Custom Evnet
window.addEventListener("localStorageChange", listenCallBack);

场景二

有两个按键 A 和 B, A按钮下存在一个子元素 a
B按钮点击事件里面会触发a元素的click和B点击事件的副作用, 不希望冒泡给A的点击事件
A按钮点击事件触发A事件的副作用

// A Click Event
const handleClickUploadFile = () => {
    const el = document.querySelector('.custom-picker input')
    if(!el) return
    el.removeAttribute('webkitdirectory')
}

// B Click Event
const handleClickUploadFolder = () => {
    const el = document.querySelector('.custom-picker input')
    if(!el) return
    el.setAttribute('webkitdirectory', true)
    const event = new MouseEvent('click',{
        bubbles: false
    })
    el.dispatchEvent(event);
}