Javascript best practice - onclick vs unobstrusive

Question

Hi,

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 wanna 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 unobstrusive 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 be happy if someone could give an opinion to that. Thanks.

Answer 1

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.