Basics

Just a simple alert window triggered by some JavaScript code inside this webpage.

Note that the rendering of the webpage halted until you clicked away the alert window. Apparently that is how your browser behaves when it renders a web page with such a script embedded in it.

It is considered bad practice to use inline scripting, i.e. to write JavaScript code inside an HTML document, as for the script above and the down() script used in the HTML code below, and better to have any JavaScript code in external files, as done for the up() script used in the HTML code below.

Now interactive

Let's make something interactive that reacts on the mouse


This picture has a MouseOver event
This picture has a MouseDown event
This picture has a MouseUp event

On this web page the mouse events have been added using event attributes for an HTML <img> element. A nicer way to do this would be with an so-called EventListener.

Mouse events are a bit old-fashioned: many devices that people use on the web do not have a mouse, but have a touch screen and maybe a pen/stylus. A more modern solution would be using so-called pointer events which are also supported in browsers for mobile mobile phones and tablets.

The World Wide Web Consortium (W3C) tries to standardise such features across browsers (see for instance the W3C spec for pointer events) but individual browser vendors will also provide information about them (e.g. see Mozilla's discussion of their API for pointer events).

The list of features and APIs provided by browsers is constantly growing. See for instance Mozilla's list of Web APIs and Chrome's list of APIs