While you are using your browser, it records various kinds of events: the user clicking a button, submitting a form or hovering over an element. That is the browser’s way of telling you the user has just done something. Your script can then respond to those events. Scripts often respond by updating the content of the web page through the document object, which makes the page more interactive. In this chapter, I list the different kinds of event you can work with to make your pages a little more interactive.
This article is not complete and may be updated
Assigning a function to an event
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Every modern browser understands this way of assigning a function to an event, but you can only attach one function per event and you cannot pass it any parameters. The parentheses have to be dropped, otherwise the code runs straight away.
Drawback
When you want to assign several functions to one event, the previous one is overwritten by the new one.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;The result: we only get the Toto! message.
Event listeners
Event listeners are a more modern approach that lets you assign several functions to a single event.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);The addEventlistener() method takes three parameters:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- event: the name of the event you want to listen for (blur, click, and so on);
- the code you want to run, either a function you have declared or an anonymous function,
- a
booleanthat controls how the event propagates, the default value is false.
Drawback
This method is not supported by older browsers.
Using parameters
We have seen that we cannot put parentheses on a function when we assign it to an event. To pass parameters anyway, we can create an anonymous function, assign that to the event, and call our own function with its parameters inside it.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});The Event object
When an event fires, an event object holds information about the event itself and about the element it happened on.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;With an event listener and parameters
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Properties
| Property | Description |
|---|---|
target | The element that fired the event |
type | The event that was fired |
Methods
| Method | Description |
|---|---|
preventDefault() | Cancels the default behaviour of an event (when it can be cancelled) |
stopPropagation() | Stops the event from propagating. |
List of events
Here is a short, non-exhaustive list of the events you come across regularly.
Browser
| Event | Description |
|---|---|
load | Fires once the browser has finished loading. It can also fire on other loaded elements, such as images, scripts or objects. |
unload | the opposite of the load event, it fires when you leave the page. |
resize | fires when the user resizes the browser window. |
scroll | fires when the user scrolls the page or an element. |
error | error fires when the browser hits a JavaScript error. |
Mouse
| Event | Description |
|---|---|
click | Fires when the user clicks an element |
dblclick | Same as click, but when the user double-clicks quickly. |
mouseup | Fires when the user holds down a mouse button. |
mousedown | Fires when the user releases a mouse button. |
mousemove | Fires when the cursor moves. |
mouseover | fires when the cursor moves over an element. |
mouseout | fires when the cursor leaves an element it was hovering over, or one of its child elements. |
Keyboard
| Event | Description |
|---|---|
input | Fires when the value of an <input> or <textarea> element changes. |
keydown | Fires when the user presses a key. If the user holds the key down, the event keeps firing over and over. |
keypress | Fires when the user presses a key that would put a character on the screen. For example, this event would not fire when the user presses the arrow keys, whereas keydown would. If the user holds the key down, the event keeps firing over and over, just like keydown. |
keyup | Fires when the user releases a key. The keydown and keypress events fire before the character appears on screen, whereas keyup fires after it has appeared. |
Finding out which key was pressed
With the Event object you can find out which key was pressed with e.keycode, which returns the ASCII key code of the keyboard key.
Form
| Event | Description |
|---|---|
submit | Fires when the user presses the form’s submit button. |
change | Fires when the state of several form elements changes (radio, checkbox and select) |
