数据属性作为回调标识符

Question

拥有基于 HTML/css/Javascript 的菜单系统。

菜单本身是使用 Javascript 动态构建的，最终结果如下：

<ul>
    <li><a href="#"><span class="icon icon-star">&nbsp;</span></a></li>
    <li><a href="#"><span class="icon icon-boat">&nbsp;</span></a></li>
    <li><a href="#"><span class="icon icon-bike">&nbsp;</span></a></li>
</ul>

我还计划有一个服务器端版本（使用服务器脚本构建菜单）和/或静态版本。当它全部启动并运行时，必须做一些基准测试。

跨度按精灵背景保存图标。

现在，我没有向每个菜单项添加事件侦听器，而是向UL 添加一个事件侦听器，并在单击或按下键时从事件中找到选定的菜单项。通常：

a = event.target;

// Find the LI element.
for (li = a; li && li.nodeName != "LI"; li = li.parentNode)
    ;

// Find the anchor (Typically if the span was clicked).
if (a.nodeName !== 'A')
    for (; a && a.nodeName != "A"; a = a.parentNode)
        ;

这很好用，但问题变成了如何确定应该采取的行动——比如点击了哪个菜单条目。

可以使用data-标签吗？

通常是这样的：

<a href="#" data-menu="1">...

然后使用switch 例程来确定菜单项。

我最初的想法是使用 ID，但我认为使用 data- 属性更灵活，更不容易发生冲突和并发症。

最初，每个菜单仅附加一个事件侦听器的想法是减少页面加载时的负载，而是在单击菜单条目时进行查找，因为在大多数情况下，当它涉及资源使用。我还需要通过在菜单选择时添加/删除.menu_selected 类来设置LI 元素的样式。

我对整个设计有点不确定。根据我所做的 (few) 测试，它运行良好，但可能有一些我没有看到的警告。

这仅针对浏览器。 HTML5 + 画布。

...现在我不确定这是一个多么好的问题，但我会试一试，如果不合适，我会删除它。

Answer 1

可以使用data-标签吗？

当然，您可以在任何选择器上委托事件。

jQuery 库也使这变得更加容易：

$('ul').on('click', '[data-menu]', function () {
    ...do awesome stuff...
});

上面的代码将点击处理程序绑定到任何和所有<ul> 元素，并在<ul> 元素中点击匹配'[data-menu]' 选择的任何元素上触发事件回调。

我不建议为了添加jQuery而添加jQuery，但是jQuery对于管理委托事件非常有用。如果您能够承受下载额外库对性能的轻微影响，那么它将大大简化代码编写。