Ember.js Evented on() Method

Last Updated : 23 Jul, 2025

Ember.js is an open-source JavaScript web framework that follows the Model-View-Controller (MVC) pattern. It provides conventions and best practices for organizing code and building user interfaces. Ember.js is used to build scalable, single-page web applications.

The on() method can register a callback function to be called when a specific event takes place. The Ember event system contains a function called on() which is helpful in many cases such as clicks.

Syntax :

object.on(eventName, target, method);

Parameters: This method accepts three parameters that are described below:

eventName: It is a string that specifies the name of the event you want to listen for.
Target: It is the object which will be bound to the callback function.
Method: It is the name of the callback function.

Return Value: This method returns this.

Steps to Install and Run Ember.js:

Step 1: To run the following examples, you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:

npm install ember-cli

Step 2: Now you can create the project by typing in the following piece of code:

ember new <project-name> --lang en

Step 3 : Navigate into the newly created directory :

cd <project-name>

Step 4 : Generate a new component and template for the click counter:

ember g component <project-name>

This will create a new route file at app/components/<project-name>

Example 1: Add a new template in the file at app/templates/components/<project-name>.hbs. Open the <project-name>.hbs file and add a button element with an {{on}} helper that will trigger a click event.

@app/templates/components/<project-name>.hbs

@app/components/<project-name>.js

Output:

👁 Image

basic click counting application

Explanation: In this example, we define a component with a clickCount property that represents the number of times the component has been clicked. So whenever we click on the component, the click button will be increment by 1 every time. We use the on() method in this code is an event listener method used to bind a click event to the "Click" button. Every time the button is clicked, the change method will be executed with an argument of '1'.

Example 2: Type the following code to generate the component for this example: