JavaScript自定義事件監聽

一.事件的屬性和方法

//事件Event
//屬性：`
`bubbles`:布爾值，是否會冒泡
`cancelable`:布爾值，是否可以取消默認動作
`target`:目標對象
`currentTarget`:當前對象
`timeStamp`:時間戳(相對於某個時刻)
`type`:事件類型，即注冊該事件的名字
`eventPhase`:返回事件傳播的當前階段


//方法
1.event.stopPropagation(); 阻止冒泡

2.event.preventDefault(); 阻止默認動作，只有cancelable為true時才可以阻止默認動作

3.event.stopImmediatePropagation(); 阻止事件鏈

二.自定義事件監聽

• CustomEvent：創建事件

• dispatchEvent：觸發事件

<script>

    // 自定義事件
    var event = new CustomEvent('myTestEvent', {
        "detail": {  //可攜帶額外的數據
            age: 18
        },
        "bubbles": true,//是否冒泡    回調函數中調用，e.stopPropagation();可以阻止冒泡
        "cancelable": false,//是否可以取消  為true時，event.preventDefault();才可以阻止默認動作行為
    });

    // 綁定監聽事件
    document.addEventListener('myTestEvent', (e) => {
        console.log(e);
    });

    // 觸發事件
    setInterval(() => {
        document.dispatchEvent(event);
    }, 100);

</script>