L2

• newEditor

Events and interactions

Mobile app development

I can make an app respond to user actions by using events.

What is decomposition?

event listener

event

an action that happens in the app which
the app can respond to

a function that waits for a user action (such as a click) and then triggers a response

trigger

the action that causes an event to run

function

a named block of code that performs a task when called

Events and interactions

Create a button-based interaction within an app

Implement event listeners to trigger outputs

Explain how events respond to interactions

Think about a light switch.

When you click the light switch on, this is an event.

The light then responds by turning on.

Explain how events respond to interactions

In an app, an event could be when a click is detected.

An event is what the app detects has happened.

Events are like signals. They tell the app, ‘Hey! The user just did something!’

Explain how events respond to interactions

Touching a button on an app is an example of an event

1

True

2

False

Why?
Any action a user takes, like touching or clicking, is an event that the app can notice.

Explain how events respond to interactions

Touching a button on an app is an example of an event.

The app does not automatically do something when an event happens.

If the light switch is not connected to the light, it will not turn on.

For an app to respond to an event, it needs something called an event listener.

Explain how events respond to interactions

An event listener is a monitor in the app’s code.

It listens for a specific action, like the click of a button.

When it notices the action, it runs a function.

The function tells the app what to do when that action happens.

Explain how events respond to interactions

to press buttons for the user

Explain how events respond to interactions

to make the app start

What is the job of an event listener?

to wait for user actions and tell the app

What is the job of an event listener?

1

To press buttons for the user

2

To wait for user actions and tell the app

3

To make the app start

Fill in the blanks

1. An event is when the app has detected that something has happened.

2. An app uses an event listener to notice when something happens.

3. The app will only respond if an event listener is attached.

4. If there is no event listener, the app will donothing when you click.

5. Apps respond to events by carrying out a function .

event

event listener

event listener

nothing

function

Events and interactions

Create a button-based interaction within an app

Implement event listeners to trigger outputs

Explain how events respond to interactions

Create a button-based interaction within an app

A button is a part of the app that users can tap or click.

Buttons can be used for a range of actions like ‘next’, ‘play’, ‘start’, or ‘help’.

A button-based interaction means the user taps a button to make something happen.

I do

We do

You do

Create a button-based interaction within an app

Creating a button

click into design mode

drag a button onto the screen

give the button a unique ID

Screenshot: code.org, 2024, licensed under CC BY-NC-SA

Demo - https://studio.code.org/projects/applab/80671751-cd8d-419e-b5f9-ac94a12b4e8b/edit

Create a button-based interaction within an app

To create a good button:

• make sure each button has clear text

• keep the layout simple and easy to read

• use space so buttons are not close to each other

• use bold colours so buttons stand out

Start

Next

Back

Create a button-based interaction within an app

Every element in the app has an ID.

ID is used to identify an element when coding events.

Always give each interactive element a unique ID.

It helps make the code clear and helps the app to work as expected.

Complete the screen creation for the colour-changer
app. Open the starter app colour-changer.

• Select the ‘Make it red’ button:

  1. Change the button colour to red.

  2. Change the font family to Arial.

• Create a new button called ‘Make it green’:

  1. Give the button an ID.

  2. The button must be green.

• Create a third button and set it to another colour.

Create a button-based interaction within an app

Click here to open up app and lab and get started

Events and interactions

Create a button-based interaction within an app

Implement event listeners to trigger outputs

Explain how events respond to interactions

A trigger is a user action that the app is
programmed to respond to.

Common triggers include:

• clicking a button

• tapping the screen

• typing in a textbox

• moving the mouse

Implement event listeners to trigger outputs

How interactivity in an app works

Implement event listeners to trigger outputs

A common trigger is clicking a button.

An event listener is attached to a button, and when it’s clicked, the app runs the function.

Implement event listeners to trigger outputs

Let’s go!

Screenshots: code.org, 2024, licensed under CC BY-NC-SA

Which of the following is an example of a trigger in
an app?

A

changing a screen’s background colour

B

a user clicking a ‘Next’ button

C

adding an image to the app

D

naming a screen

Events and interactions

Events are things that happen in an app.

An event listener is code that waits for an event to happen and then runs a function.

A trigger is the user’s action that starts the event.

A function is a set of instructions the app follows when the event happens.

A good user interface is easy to use and clearly shows the user what to do next.

© Oak National Academy 2025.

Produced in partnership with The Raspberry Pi Foundation.

Licensed on the Open Government Licence v3.0, except where otherwise stated. See Oak terms and conditions.