Question

在我们的项目中目前我有以下问题。我必须将一些点击绑定到一个锁定元素列表，如下所示：

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li>
  </ul>

点击.listelement应该向具有特定参数的特定操作发送请求，例如element-id等等（ - ＆gt; module / action？id = 1＆amp; something = something）。

我想编写一个通用请求类，它发送请求并处理所有与click和请求有关的事情，我不确定它是否是将click click不引人注意地绑定到类的好方法。监听并在我的标记中的某处保存动作和参数信息，或者如果通过onclick =“sendRequest（action，params）”绑定点击要好得多。

在我看来，阻碍性的onclick解决方案更容易，但我不确定它是否也是一个很好的解决方案。

如果有人能对此发表意见，那将会很高兴。感谢。

Answer 1

我建议使用体面的标记，而不是依赖onclick属性。最大的原因是它可以保持你的标记干净，如果你有很多这些元素，它也会大大减少字节大小。

此外，我不会在id属性中对值进行编码，因为您现在可以合法地使用HTML5数据属性，并且它们也向后兼容。

<ul id="container">
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li>
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li>
    ...
</ul>

在标记中获得数据后，设置点击处理程序并将其与Request类连接起来相当简单。

var list = document.getElementById("container");
var items = list.getElementsByTagName("li");

for(var i = 0; i < items.length; i++) {
    items[i].onclick = (function(element) {
        return function() {
            var action = element.getAttribute('data-action');
            var id = element.getAttribute('data-id');
            var params = element.getAttribute('data-params');

            sendRequest(action, params);
        };
    })(items[i]);
}

如果您有批次的<li>元素，那么事件委派可能是更好的方法，而不是为每个元素添加一个处理程序。另外，请考虑使用DOM事件注册模型来添加处理程序而不是onclick属性，因为这会将选项限制为最多一个处理程序。

Answer 2

这是一个选项。改为生成li的链接<a>，并将控制器/操作作为查询字符串（如果后端可以解析漂亮的URL，则将斜杠分隔的键值对）。假设您正在进行AJAX调用，请使用一些简单的javascript，在页面加载时，挂钩所有<a>元素的click事件与给定的类（您可以选择适当的东西，如.ajax-link）。在处理程序中，阻止默认操作，以便浏览器不会导航到href，并拔出href，解析它，并使用它配置xhr然后离开。不确定你是否使用像jQuery这样的库，但这会减轻负载和代码的交易。

如果需要，可以将<a>嵌套在现有<li>内。

这可能会有所帮助：JQuery parameter injection on bind/click vs. embedded click handlers with parameters

Javascript最佳实践 - onclick vs unobtrusive

2 个答案: