JavaScript Events
12 lessonsAbout 72 minutesIntermediate
This part of the JavaScript Tutorial runs from JavaScript Events through to JavaScript Custom Events. There are 12 lessons here, and working through them takes about 72 minutes at a steady pace.
It follows on from JavaScript DOM, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1JavaScript EventsA JavaScript event is something that happens on a page, and code can run in response.
- 2JavaScript addEventListeneraddEventListener attaches a handler to an element and can control how it runs.
- 3JavaScript Event ObjectEvery handler receives an event object describing what happened.
- 4JavaScript Mouse EventsMouse events report clicks, movement and hovering over an element.
- 5JavaScript Keyboard EventsKeyboard events report which key was pressed and let you respond to it.
- 6JavaScript Form EventsForm events fire when a field changes or a form is submitted.
- 7JavaScript Event BubblingAn event fired on an element travels up through its ancestors.
- 8JavaScript Event DelegationEvent delegation puts one listener on a parent instead of many on its children.
- 9JavaScript preventDefaultpreventDefault stops the browser's normal response to an event.
- 10JavaScript removeEventListenerremoveEventListener detaches a handler, but only if it can identify it.
- 11JavaScript Page Load EventsDOMContentLoaded and load tell you when the page is ready to work with.
- 12JavaScript Custom EventsA custom event lets one part of your code announce something to another.