一些不常用的 Api 总结

composedPath

此方法用来获取事件监听器返回的事件路径，可以用来代替Element.contains来判断点击区域

• 语法

let composed = Event.composedPath()

• 判断事件区域

event.target === el || event.composedPath().includes(el)

matches

此 api 用来匹配当前元素上的选择器,如果元素被指定的选择器字符串选择，Element.matches() 方法返回 true; 否则返回 false。

• 语法

let result = element.matches(selectorString)

• 使用

el.matches('.endangered')

polyfill

closest

Element 接口的 closest() 方法遍历元素及其父元素（指向文档根目录），直到找到与指定 CSS 选择器匹配的节点。

• 语法

let result = element.closest(selectorString)

• 用法

el.closest('article > div')

BroadcastChannel

<!-- 发送消息的页面 -->
<button onclick="sendMessage()">发送广播消息</button>
<script>
    // 创建名为 "demo_channel" 的广播频道
    const channel = new BroadcastChannel('demo_channel');

    function sendMessage() {
        // 发送消息（支持任意可序列化数据）
        channel.postMessage({
            text: "Hello from Tab 1!",
            timestamp: new Date().toISOString()
        });
    }

    // 页面关闭时关闭频道（可选）
    window.addEventListener('beforeunload', () => {
        channel.close();
    });
</script>

<!-- 接收消息的页面 -->
<div id="message-container"></div>
<script>
    // 加入同名频道
    const channel = new BroadcastChannel('demo_channel');

    // 监听消息事件
    channel.onmessage = (event) => {
        const msg = `[${event.data.timestamp}] 收到消息：${event.data.text}`;
        document.getElementById('message-container').innerHTML += `<p>${msg}</p>`;
    };

    // 错误处理（可选）
    channel.onmessageerror = (error) => {
        console.error('消息解析错误:', error);
    };
</script>