Javascript best practice - onclick vs unobstrusive

In our project currently I have the following problem. I have to bind some clicks to a list of elements locking like the following:

  <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>

The click on .listelement should send a request to a specific action with specific params like element-id and something like that (-> module/action?id=1&something=something).

I want to write a generic request class that send the request and handle all things, that have to do with the click and the request and I'm not sure if it is a good way to bind the click unobtrusive to the class .listelement and to save the action and param information somewhere in my markup OR if it is much better to bind the click by the onclick="sendRequest(action, params)".

The obstrusive-onclick-solution seems to me much easier, but I'm not sure if it is also a GOOD solution.

Would开发者_JAVA百科 be happy if someone could give an opinion to that.

---

I would suggest use decent markup and not rely on onclick attributes. The biggest reason would be that it keeps your markup clean, and it also reduces byte-size over the wire vastly if you have a lot of these elements.

Also, I wouldn't encode values in the id attribute, as you can now legally use HTML5 data attributes and they are backwards compatible too.

<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>

Once you have the data in the markup, it's rather simple to setup the click handlers and connect it with the Request class.

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]);
}

If you have a lot of <li> elements, then event delegation may be a better approach instead of adding one handler for each element. Also, consider using DOM event registration model for adding handlers instead of the onclick property as that limits options to one handler maximum.

---

Here's an option. Make the li's links <a> instead and put the controller/action as a querystring (or slash delimited key-value pairs if your back end can parse pretty URLs). Assuming you're doing an AJAX call, have some simple javascript that, on page load, hooks the click event for all <a> elements w/ a given class (you can pick something appropriate, like .ajax-link). In the handler, prevent the default action so the browser doesn't navigate to the href, and pluck the href, parse it, and configure an xhr with it and away you go. Not sure if you're using a library like jQuery, but that would lighten the load and the code a deal.

If you need to, you can nest the <a> inside the existing <li>.

This might help: JQuery parameter injection on bind/click vs. embedded click handlers with parameters