声明式触发器:点击与「兴趣」
打开/关闭浮层这种事,本来都要 addEventListener('click', …) 一个个挂。新的 invoker(调用者)把它做成 HTML 属性:点击类用 command + commandfor,hover / focus 类用 interestfor。按钮和它控制的目标在 HTML
里直接连线,大量浮层交互可以一行 JS 都不写。
1 · command / commandfor:点击命令
commandfor="目标id" 把 <button> 变成调用者,command 指定动作。内置命令覆盖了 dialog 和 popover 的常用操作:
2 · 自定义命令:command 事件 + e.source
自定义动作用 -- 前缀命名。点击时,目标元素上派发一个 CommandEvent,里头 e.command 是命令字符串、e.source 是哪个按钮触发的。下面三个按钮共用一张图当目标:
3 · interestfor:hover / focus 触发的「兴趣」
command 是「点击」。但 tooltip、头像悬停卡这类要的是「我对它有兴趣」——鼠标悬停或键盘聚焦时显示,离开就收。这就是 interestfor:放在 <a> / <button> 上,指向一个(通常是
popover="hint" 的)目标。它不需要 command 那样的动作参数——语义固定为「有兴趣就显示,失去兴趣就隐藏」。
配套还有:伪类 :interest-source(处于兴趣态的触发元素)/ :interest-target(被激活的目标),以及延时属性 interest-show-delay / interest-hide-delay 控制悬停多久才弹/移开多久才收。放在
<a> 上还能双重行为:点击/回车走链接跳转,悬停/聚焦显示兴趣浮层。(浮层位置一般配 CSS Anchor Positioning 钉到触发元素旁。)
4 · 三种触发器对照
延伸阅读:interestfor 与 invoker / command / source · 张鑫旭——声明式 command / commandfor 与 hover 触发的 interestfor,以及
CommandEvent.source / :interest-source 等配套;再配 Una Kravets 关于 interest invokers / popover="hint" 的演示串(X 需登录可见)。