Question

Ok, I have an unordered list like so:

<ul id=list>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
    <li> Item 5 </li>
</ul>

Is there any simple way of creating onclick events for each of the individual li’s?

Here’s my objective… I have CSS setup like so:

#list li {...some styles here...}
#list li:active {...change background color and font color on click...}

So again, any simple way of doing this? I know I can achieve it by simply adding an onclick event to each of the individual li’s, but any smart way of doing this?

(For clarification – I’m actually going to be using an ‘ontouchstart’ event for mobile webkit)

Answer 1

If you do not want to use any third party library like jQuery, you can try something like

var parentNode = document.getElementById('list');
parentNode.onclick=function(e){
    e = e || event;
    var target = e.originalTarget || e.srcElement;
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
}

The code make use of javascript event bubbling. It will help to reduce the number of click events registered in the page and help to increase the performance.

But I would strongly request you to look into using some matured library like jQuery.

Using jquery it will be as simple as

$("#list").delegate("li", "click", function(){
    $(this).css('background-color', 'your color');
    $(this).css('color', 'your color');
});

I would recommend the usage of delegate since it will help to reduce the number of click event registered in the page.