In the last post Events in JavaScript – Part 1 – Coding a “Score Keeper Game” I looked at using events to code a “gaming score keeper” that had event listeners (“click” and “change”) that allowed us to keep track of our score when playing a game with someone.

This post is going to carry on from that last one and this time I’m going to be using event listeners to make a simple ToDo list (looks wise – we won’t be able to add items to it for example). The aim is to firstly create a list that has items that change colour when you hover the mouse over them. I’m writing this simply to illustrate the functionality of some different types of event listeners (mouseover, mouseout or hover effects etc).

ToDo List Example

// NOTE: I couldn’t get the “line-through” CSS to work when you click on an item on the list through JavaScript on this page and I guess this is because of a conflict with some existing JavaScript on the site (that at my current level of understanding I just can’t make it work – I’m sure I’ll come back here and fix this once I figure it out).

// Click here to see a working example.

• This is item 1
• This is item 2
• This is item 3
• This is item 4

The first thing that was done was an unordered list was added to a blank HTML page one item added to the list. Then, in the JaveScript file connected to the page, the following code was added.

// Select the li element on the HTML page
var li = document.querySelector("li");

Once the “li” element has been selected we create the listener only this time we use the “mouseover” method as shown below. For the moment I’m just logging to the console the words “Hovers over” to test the function. Once that has been done I can change the colour of the element.

// Setup mouseover listener
li.addEventListener("mouseover", function(){
	console.log("Hovers over");	
});

To change the colour of the element back to its original colour another listener is added only this time using the “moutsout” method.

// Setup mouseout listener
li.addEventListener("mouseout", function(){
	console.log("Left");	
});

Now that we’ve got that working for one “li” item we can now begin to look at adding more li items (to the HTML file) and then changing the colour of those as well (at the moment we’re using document.querySelector(“li”) which means we’ll only have the first “li” returned – which at the moment, considering I only have one list item is fine, but we need to add more).

To make that change, the first line of code in the JavaScript file was changed to select all li’s on a page (and the HTML page changed to include 4 list items).

// Select all the li elements on the HTML page
   var lis = document.querySelectorAll("li");
// var li = document.querySelector("li"); <- the original

With that change made, we’re now returned a node list of all of the li elements found on the page and to add listeners to that list we’re going to use a for loop.

for(var i=0 ; i<lis.length ; i++){
	// Setup mouseover listener
	lis[i].addEventListener("mouseover", function(){
		this.classList.add("active");
	});
	// Setup mouseout listener
	lis[i].addEventListener("mouseout", function(){
		this.classList.remove("active");
	});
}

Once each event is triggered, we’re changing the class of the li item the mouse is currently positioned over to “active” and then removing the class when the mouse leaves the area giving us the list that we saw as the example at the beginning of this post.

• This is item 1
• This is item 2
• This is item 3
• This is item 4

I could add another “click” listener to the program but it doesn’t seem to show up on the blog (conflicting new JavaScript with old most probably but way over my head at the moment).