Chapter 6: Events

Events

At this point, we’re displaying a list of players inside the interface, but there’s no way for users to interact with this list. The data is dynamically retrieved from the “PlayersList” collection, but it still feels static.

We’ll spend the rest of this book fixing this problem, but over the next couple of chapters in particular, we’re going to allow users to click and select players in the list. Specifically, when a user clicks on one of the players, the background color of that player’s li element will change to yellow.

To achieve this, we’re going to create an event, and within Meteor, events allows us to trigger the execution of code when a user clicks on a button, submits a form, taps a key on their keyboard, or completes a numbers of other actions. Events allow users to interact with our interfaces.

Create an Event

To create an event, write the following code inside the isClient conditional:

Template.leaderboard.events({
    // events go here
});

Here, there’s a few things going on:

First, the Template keyword searches through all of the templates in this project.

Second, the leaderboard keyword is a reference to the name of the template that we’re about to attach some events to.

Third, the events keyword is used to specify that, within the coming block of code, we want to specify one or more events. This structure is similar to how we previously defined helper functions.

This code is placed inside the isClient conditional because events will only trigger from inside the user’s web browser. As such, it doesn’t make sense for the code to run on the server and the conditional is required.

Between the curly braces of the events block, create an event in the JSON format:

Template.leaderboard.events({
    'click': function(){
        // code goes here
    }
});

Here, there’s two things going on:

First, we’ve defined the event type. That’s the click part. Because of this, the code inside the associated function will execute when a user clicks anywhere within the bounds of the “leaderboard” template.

Second, we’ve attached a function to this event. Inside this function, we can write whatever code we want to execute when the click event occurs.

To illustrate this, place a console.log statement inside the event’s function:

Template.leaderboard.events({
    'click': function(){
        console.log("You clicked something");
    }
});

Then save the file, switch back to Chrome, and click anywhere within the bounds of the “leaderboard” template. With each click, the “You clicked something” message should appear inside the Console.

Event Selectors

The problem with the event that we’ve created is that it’s too broad. It triggers when the user clicks anywhere within the bounds of the “leaderboard” template, but it’d be a lot more useful if it triggered when the user did something specific – such as clicking on a particular player in the list.

To achieve this, we’re going to use event selectors, and selectors allow us to attach events to specific HTML elements. If you’ve ever used jQuery before, this process will be familiar, but if not, it will still be easy to grasp.

Earlier, we placed li tags inside the “leaderboard” template:

<li>{{name}}: {{score}}</li>

The plan now is to make it so the event triggers when the user clicks on one of these li elements.

To do this, change the event to the following:

'click li': function(){
    console.log("You clicked an li element");
}

Here, we’ve added a reference to the li element after the click keyword. This reference is the event’s selector, and because of it, the event will now trigger when a user clicks any li element that’s inside the “leaderboard” template.

We’ve also changed the message that’s output by the console.log statement.

But the problem with this code is that, if we have other li elements inside this template that are not part of the list of players, then the event would trigger when it’s not supposed to trigger.

To account for this, attach a class of “player” to the li elements:

<li class="player">{{name}}: {{score}}</li>

…and use this class as the event selector:

'click .player': function(){
    console.log("You clicked a .player element");
}

Here, we’ve made it so the event will only trigger when the user clicks on any element with the “player” class attached to it.

After saving the file, the final result won’t appear any different, but if we add any other li elements to the template, the event won’t trigger when it’s not supposed to.

Summary

In this chapter, we’ve learned that:

  • We can use events to trigger the execution of code when the user clicks a button, submits a form, or completes a range of other actions.
  • By using event selectors, we can attach events to certain elements within the application’s interface.

To gain a deeper understanding of Meteor:

  • Experiment with different event types, like dblclick, focus, blur, mouseover, and change. Figure out how these event types behave, and try to integrate them with the Leaderboard application.

To browse the project’s code in its current state, click here.