Javascript Events

Reading: Tutorial at w3schools, Introduction to Events at Mozilla

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