Lesson 3.6. JavaScript events

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

• HTML is used to describe the content of the pages;
• CSS is used to describe the formatting.

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:

• an element of the page is clicked
• the mouse is moved
• a key is pressed
• ...

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

• the action that triggers it (the cause)
• and the action that will be generated by the event (the consequence)

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

• the click on the button is the trigger of the event (the cause);
• the alert is the action triggered by the event (the consequence).

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'>

Example

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.
</p>

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

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.
</p>

Let's analyze the code of the onclick attribute:

this.innerText='Text has changed.'

• this is the current element (here the <p></p> tag in which the event is located)
• innerText is a keyword that describes the text contained in the tag, the inner text
• 'The text has changed.' is the string (the text) that we will write in the tags

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

Exercises

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:

• the answer is displayed when you move the mouse over it ;
• the answer is erased when the mouse is removed from the answer.

Quiz

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

---

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

---

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

---

What language is used to program a web server?

---

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

---

In the code below, what does this refer to?

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

---

See also

• Web development class
• Lesson 1.1. History of the Internet
• Lesson 1.2 Introduction to HTML
• Lesson 1.3. Special characters in HTML
• Lesson 1.4. Comments in HTML
• Lesson 1.5. Global structure of HTML pages
• Lesson 1.6. Hyperlinks in HTML
• Lesson 1.7. ID attribute in HTML tags
• Lesson 1.8. HTML anchors
• Lesson 1.9. Images in HTML pages
• Lesson 1.10. HTML tables
• Lesson 1.11. Most used HTML tags
• Lesson 1.12. Some advice
• Lesson 1.13. Ressources
• Lesson 2.1. Introduction to CSS
• Lesson 2.2. Inline CSS
• Lesson 2.3. Internal CSS
• Lesson 2.4. External CSS
• Lesson 2.5. CSS selectors
• Lesson 2.6. CSS colors
• Lesson 2.7. Margin and padding
• Lesson 2.8. CSS units
• Lesson 2.9. Most used CSS properties
• Lesson 3.1. History of JavaScript
• Lesson 3.2. JavaScript Hello World
• Lesson 3.3. Console.log
• Lesson 3.4. Comments in JavaScript
• Lesson 3.5. Variables in JavaScript
• Lesson 3.7. Document Object Model (DOM)
• Lesson 3.8. Changing HTML
• Lesson 3.8. JavaScript frameworks
• Lesson 4.1. Introduction to PHP
• Lesson 4.2. PHP tags
• Lesson 4.3. PHP variables
• Lesson 4.4. isset vs empty vs is_null
• Lesson 4.5. PHP operators
• Lesson 4.6. PHP quotes
• Lesson 4.7. Tests in PHP: if .. else
• Lesson 4.8. PHP arrays
• Lesson 4.9. PHP loops
• Lesson 4.10. PHP sessions
• Lesson 5.1. HTML forms
• Lesson 5.2. HTML forms, POST or GET?
• Lesson 5.3. Input fields
• Lesson 5.4. HTML form fields
• Lesson 6.1. Introduction to MySQL
• Lesson 6.2. phpMyAdmin
• Lesson 6.3. SQL queries
• Lesson 6.4. Connect to MySQL in PHP
• Lesson 6.5. SQL queries in PHP
• Lesson 6.6. Getting data from MySQL in PHP
• Lesson 6.7. Get last ID

---