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>