Event-based Programming in JavaScript

Your web content isn't a work of art that is intended to be admired from a distance. It is meant to be interacted with using your mouse, keyboard, and fingers. To make this happen, you have what are known as events. To learn all about events and how to use them properly, you are in the right place! :P

CHAPTER 1

Introduction to Events

In this introductory tutorial, learn how to make your applications interactive by using Events.
read watch
CHAPTER 2

Event Capturing and Bubbling

Learn about the mysterious null and undefined built-in types and what role they play in your code.
read watch
CHAPTER 3

Mouse Events

Learn all about how to work with the mouse by both learning about the various events and the properties they expose.
read
CHAPTER 4

Running Your Code at the Right Time

Run your code at the right time by making sense of DOMContentLoaded, load, async, defer, and position in the DOM.
read
CHAPTER 5

Handling Events for Many Elements

Without bloating your code, learn how to rely on event propagation to easily and efficiently listen for events on many elements.
read
CHAPTER 6

Keyboard Events

Learn all about how to work with the keyboard by both learning some boring stuff as well as seeing some awesome examples!
read
CHAPTER 7

Custom Events

Don't just use events that others have created. Be courageous and learn how to create your own events!
read

Take what you've learned further with the following related articles and examples that give you a small taste of what is possible with events.

example

Page Navigation on Click

Learn how to use JavaScript to specify a URL and navigate to a different page when you click on something.
read
example

Preloading Images

Learn how to use JavaScript to silently preload images before you need to use them.
read
example

Filtering Items In A List

Learn how to effectively filter items by combining checkboxes, list items, custom data attributes, and more!
read
example

Detecting If the User is Idle or Inactive

Make your app behave differently when users are not actively interacting with it.
read
example

Getting the Mouse Click Position

Learn how to calculate the exact coordinates / position of a mouse click using some JavaScript.
read
example

Getting the Mouse Movement Direction

Easily find out what direction your mouse cursor is moving in by comparing the current position with an earlier position!
read
example

Check If You Are On a Touch Enabled Device

Use this simple piece of JavaScript to easily check if you are on a touch enabled device or not.
read
example

Detecting If the User is Idle or Inactive

Make your app behave differently when users are not actively interacting with it.
read
example

Accessing Your Webcam in HTML

Learn how the <video> element combined with the getUserMedia function can help you display your webcam's video stream in the browser.
read
example

The Battery Status API

See how to use the Battery Status API in JavaScript to create a totally sweet visual battery level/status indicator.
read

Customize Theme

Event-based Programming in JavaScript

Introduction to Events

Event Capturing and Bubbling

Mouse Events

Running Your Code at the Right Time

Handling Events for Many Elements

Keyboard Events

Custom Events

Page Navigation on Click

Preloading Images

Filtering Items In A List

Detecting If the User is Idle or Inactive

Getting the Mouse Click Position

Getting the Mouse Movement Direction

Check If You Are On a Touch Enabled Device

Detecting If the User is Idle or Inactive

Accessing Your Webcam in HTML

The Battery Status API

The KIRUPA Newsletter

Follow:

Popular

Loose Ends