Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box.
When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
There are different types of Events in Javascript which you can register and react to it.
Here are the basic Events which is widely used on most of the websites.
| Event | Description |
| onchange | An HTML element has been changed |
| onclick | The user clicks an HTML element |
| onmouseover | The user moves the mouse over an HTML element |
| onmouseout | The user moves the mouse away from an HTML element |
| onkeydown | The user pushes a keyboard key |
| onload | The browser has finished loading the page |
Example:
A simple example
Let’s look at a simple example to explain what we mean here. You’ve already seen events and event handlers used in many of the examples in this course already, but let’s recap just to cement our knowledge. In the following example, we have a single <button>, which when pressed, makes the background change to a random color:
<button>Change color</button>The JavaScript looks like so:
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}