LinuxSir.cn,穿越时空的Linuxsir!

 找回密码
 注册
搜索
热搜: shell linux mysql
查看: 222|回复: 0

自定义事件(Custom events)

[复制链接]
发表于 2024-1-29 23:17:18 | 显示全部楼层 |阅读模式
当我们发送(dispatch)自定义事件,我们需要设置 bubbles 和 composed 属性都为 true 以使其冒泡并从组件中冒泡出来。

例如,我们在 div#outer shadow DOM 内部创建 div#inner 并在其上触发两个事件。只有 composed: true 的那个自定义事件才会让该事件本身冒泡到文档外面:

<div id="outer"></div>

<script>
outer.attachShadow({mode: 'open'});

let inner = document.createElement('div');
outer.shadowRoot.append(inner);

/*
div(id=outer)
  #shadow-dom
    div(id=inner)
*/

document.addEventListener('test', event => alert(event.detail));

inner.dispatchEvent(new CustomEvent('test', {
  bubbles: true,
  composed: true,
  detail: "composed"
}));

inner.dispatchEvent(new CustomEvent('test', {
  bubbles: true,
  composed: false,
  detail: "not composed"
}));
</script>

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表