知识森林

Appearance

On this page

Event 常用事件 ​

监听事件一般都需要销毁, 所以需要成对使用, 这里做统一处理，使用时只需要关注页面逻辑函数。

dom元素resize事件 ​

js
// dom元素
const el = document.getElementById('TEST')
// dom尺寸发生变化函数
const resizeFun = ($event) => {
    log('dom尺寸发生了变化')
}

// 监听dom resize
domResize(element, resizeFun)

浏览器的resize事件 ​

js
const resizeFun = () => {
    log('浏览器尺寸发生了变化')
}
/**
 * @param resizeFun 事件回调
 * @param wait 等待市场
 * @param { immediate: true } 是否立即执行resize监听
 * @return [start, stop] 可以控制监听事件
 */
// 自动触发resize
windowResize(resizeFun, 150, { immediate: true })

// 手动触发
const [start, end] = windowResize(resizeFun, 150, { immediate: false})
onMounted(() => start())

手动触发浏览器resize ​

js
// 触发resize
dispatchResize()

自定义监听事件 ​

js
/**
 * @param element Element | HTMLElement | Document | Window
 * @param event 事件名称
 * @param handler 处理函数
 */
on(window, 'resize', () => {
    log('window尺寸发生了变化！')
})