Reading: Tutorial
at w3schools,
Introduction
to Events at Mozilla
- Events are just certain things that can occur in a browser.
- Certain things: not anything you can think of.
- Javascript defines a long list of these.
- Arbitrary Javascript may be run when the event occurs.
- Events are often associated with particular elements or other javascript
objects.
- Javascript defines many events.
Here are some examples. (Note: event names are not always written with
the on- prefix.)
- onclick: The user clicks on some element.
- onmouseover: The mouse enters an object.
- onmouseout: The mouse leaves an object.
- onkeydown: The user pushes a key.
- onload: The browser has finished loading the page.
- onresize: The page is resized.
- onpaste: The page is resized.
- ondrag: Fired while and object is being dragged, every 350ms.
- ondrop: An item is dropped.
- many,
many
others.
- Assigning an event to an object.
- HTML: <sometag onevent="javascript code">...
- JS: element.onevent = nameofafunction;
- JS: element.onevent = function() { ... };
- JS: element.addEventListener('event', function); and
element.removeEventListener('event', function);.
- The last one allows multiple handlers for the same event.
- Invoking the code
- A Javascript function is specified, it may take an argument.
- This is an event object.
- Describes details of the event.
- Attributes vary by the event.
- Click event tells the location of the mouse, a count to identify
double-click, and if shift and control keys were pressed.
- The drop event tells you the object which was dropped.
[ Colors Source ]
[ Arithmetic Source ]
[ Move To Front Source ]
(M C Escher)
- Timed events
- Events that occur at specified intervals.
- Set from Javascript:
- window.setTimeout(function, milliseconds);, fires once.
- window.setInterval(function, milliseconds);, fires repeatedly.
- Sometimes, you may want to cancel an event, especially a repeating one.
var e = window.setInterval(function, milliseconds);
...
clearTimeout(e);
- Can also remember and cancel on-time setTimeout() events, if you
decide you really didn't mean it.
[ Auto Colors Source ]
[ Slow Auto Colors Source ]
[ Someone's In There Source ]