Lesson 3.6. JavaScript events

If you have been following this course from the beginning, you have understood that:

The purpose of JavaScript is to manage the interactions between the user and the page (HTML/CSS). These interactions are triggered by an action (usually from the the user). For example:

These actions are called events in JavaScript. An event is composed of of two parts:

For example, if an alert is displayed when a button is clicked:

The event mechanisms are very powerful and allow to perform an infinite number of sometimes very complex interactions. Today, the majority of online video games (like slither.io for example) are written in JavaScript.

We will start with the simplest syntax: writing the event directly in the attribute of an HTML tag:

<balise cause='consequence'>


The example below triggers an alert when the user clicks on the paragraph text (<p></p>).

<p onclick="alert('You have triggered an event by clicking.')">
  CLick here to display an alert.

Here is the result:

In the above example, there is a paragraph in <p></p> tags. These tags have an onclick attribute which indicates that an event will be triggered if the user clicks in this paragraph.

The onclick attribute contains JavaScript code, here an alert.


this is a JavaScript keyword that designates the current element. In the example above, this would represent the <p></p> paragraph in which the onclick attribute is located.

this allows to modify the content or the properties of this element. The example below below allows you to change the text of the paragraph when you click on it:

<p onclick="this.innerText='Text has changed.' ">
    Click here to change the text.

Let's analyze the code of the onclick attribute:

this.innerText='Text has changed.'

Finally, we replace the text contained between the tags..

Most used events

The table below lists some of the most common events:

Event Description
onchange An HTML element has been modified
onclick The user clicked on an HTML element
oncontextmenu User opens a context menu (right click)
onmouseover Mouse enters the element
onmouseout Mouse leaves the element
onkeydown The user presses a key on the keyboard
onload The browser has finished loading the page


Exercise 1

In the HTML code below, add an event that opens an alert when the user click on the image. The alert should display the text: Do not touch Chuck Norris.

<img src="https://lucidar.me/en/web-dev-class/files/chuck-norris.jpg" height="300">

Here is the expected result:

Exercise 2

Complete the code from exercise 1 so that an alert displays Image protected by Chuck Norris. if the user tries to open the context menu of the image (right click). Here is the expected result:

Pour éviter que le menu ne s'ouvre en plus de l'alerte, il faut ajouter une deuxième instruction : return false;. N'oubliez pas de séparer les instructions par des points-virgules.

Exercise 3

Write an HTML page according to the template below. When the user clicks to see the answer, the text is replaced by the answer. Here is the expected result:

Exercise 4

Modify the code of the previous exercise so that:


What language is used to describe the content of web pages?

Check Good for you! On a well-designed site, HTML describes only the content of the pages. Try again...

What language is used to describe the formatting of web pages?

Check Bravo! Style sheets (CSS) are used to format pages. Try again...

What language is used to manage the interaction on the web page?

Check Bravo! JavaScript was created because neither HTML nor CSS can handle advanced interactions. Try again...

What language is used to program a web server?

Check Bravo ! That's a good answer, although NodeJS (derived from JavaScript) also allows you to program servers. Try again...

Which attribute triggers an event when a key is pressed on the keyboard?

Check Bravo ! To be precise, onkeydown triggers the event when the key is pushed. Try again...

In the code below, what does this refer to?

<p onclick="this.innerText='Text has changed.' ">
    Click here to change the text.
Check Bravo ! this is the current element. In our case, it's the entire tag. Try again...

See also

Last update : 10/07/2022