数据属性作为回调标识符 [英] Data attribute as callback identifier
问题描述
菜单本身是使用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>
我还计划使用服务器端版本（使用服务器脚本构建菜单）和/或静态版本。必须在完成并运行时做一些基准测试。
跨度包含sprite背景的图标。
现在，我添加了一个到 UL 的菜单条目，而不是在每个菜单条目中添加事件监听器，并且在点击或按下时从事件中查找选定的菜单条目。通常情况下：
a = event.target;
//找到LI元素。
for（li = a; li& li.nodeName！=LI; li = li.parentNode）
;
//找到锚（通常如果跨度被点击）。 （a.nodeName！=='A'）
for（; a&& a.nodeName！=A; a = a.parentNode）
;
这可以正常工作，但问题在于如何识别应采取的操作 - 被点击。
可以使用数据 - 标记吗？
通常是这样的：
< a href =＃data-menu =1> ...
然后使用 switch 例程来确定菜单条目。
我最初的想法是使用ID，但正如我看到的，它使用 data - 属性更加灵活，并且不太容易出现冲突和复杂情况。
最初只附加一个事件侦听器每个菜单都是为了减轻页面加载时的负载，而当菜单条目被点击时，可以通过查找，因为在大多数情况下，当涉及到资源使用时可以优先考虑。我还需要通过在菜单选择时添加/删除 .menu_selected 类来设计 LI 元素。
我对整个设计有点不确定。它可以正常工作（ few ）我已经完成了，但是可能会有一些我没有看到的警告。
从来没有浏览器只。 HTML5 + canvas。
...现在我不确定这个问题有多好，但是如果不恰当，我会尝试删除它。
使用
数据 -标记？
当然，您可以将任何事件委托给任何选择器。
jQuery库使得它更容易：
$（ ''点击'，'[数据菜单]'，功能（）{
...做真棒的东西...
}）;
上面的代码将点击处理程序绑定到任何和所有< ul> 元素，并且触发与'[数据匹配的选择。< ul> 元素中单击的任何元素上的事件回调-menu]'
为了添加jQuery，我不建议添加jQuery，但jQuery对管理委托事件。如果您能够轻松下载其他库，那么它将使编写代码变得更容易。
Having a HTML/css/Javascript based menu system.
The menus themselves are dynamically built using Javascript and ends up in something like this:
<ul>
<li><a href="#"><span class="icon icon-star"> </span></a></li>
<li><a href="#"><span class="icon icon-boat"> </span></a></li>
<li><a href="#"><span class="icon icon-bike"> </span></a></li>
</ul>
I also plan to have a serverside version (build the menus using server script) and / or static versions. Have to do some benchmarks when it is all up and running.
The span holds icons by sprite background.
Now, instead of adding event listener to each menu entry I add one to the UL and on klick or key-down I locate the selected menu entry from the event. Typically:
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)
;
This works fine but the question becomes how to identify which action should be taken – as in which menu entry was clicked.
Would it be OK to use the data- tag?
Typically something like:
<a href="#" data-menu="1">...
And then use a switch routine to determine menu entry.
My initial thought was to use ID's, but as I see it using the data- attribute is more flexible and less prone for clashes and complications.
Initially the idea behind attaching only one event listener per menu is to lessen the load at page load and instead do the finding when menu entry are clicked as by then in most cases that can take precedence when it comes to resource usage. I also need to style the LI element by adding/removing a .menu_selected class upon menu selection.
I'm a bit unsure about the design as a whole. It works fine by the (few) test I have done, but there might be some caveats I'm not seeing.
This is targeting never browsers only. HTML5 + canvas.
… and now I'm unsure how good a question this is, but I'll give it a try and delete if not appropriate.
Would it be OK to use the
data-tag?
Certainly, you can delegate events on any selector.
The jQuery library makes this much easier too:
$('ul').on('click', '[data-menu]', function () {
...do awesome stuff...
});
The code above binds a click handler to any and all <ul> elements, and fires off event callbacks on any element clicked within the <ul> elements that matches the '[data-menu]' selection.
I don't recommend adding jQuery for the sake of adding jQuery, but jQuery is very useful for managing delegated events. If you're able to take the minor performance hit of downloading an additional library, then it'll make writing code significantly easier.
这篇关于数据属性作为回调标识符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
