CustomEvent

2023年10月14日

柏拉文

越努力，越幸运

一、认识

---

通过 new CustomEvent 创建事件, 通过 dispatchEvent 派发事件。new CustomEvent 创建的事件特点如下:

1. 通过 detail 属性可以传递自定义数据

二、语法

---

2.1 静态创建、分派

// 创建 lazy 事件
const customEvent = new CustomEvent('lazy', {
    detail: {
        a: 1,
        b: 2
    }
});

const divDom = document.querySelector('#div');

// 监听 lazy 事件
divDom.addEventListener('lazy', function (e) {
    console.log('e', e);
});

// 触发 lazy 事件
setTimeout(() => {
    divDom.dispatchEvent(customEvent);
}, 3000);

2.2 动态创建、分派

const divDom = document.querySelector('#div');

// 监听 尚未创建 的 lazy 事件
divDom.addEventListener('lazy', function (e) {
    console.log('e', e);
});

// 动态创建、派发 lazy 事件
setTimeout(() => {
    divDom.dispatchEvent(
        new CustomEvent('lazy', {
            detail: {
                a: 1,
                b: 2
            }
        })
    );
}, 3000);

三、应用

---