Events

• Use event handlers to work with windows
• Capture mouse movements and clicks
• Use form event handling to process forms
• Capture and react to keyboard events

One thing you will notice throughout these notes is that a lot depends upon differences between browsers - especially when dealing with the screen and the keyboard. This greatly complicates programming. Fortunately, the same Ajax libraries that make working with asynchronous JavaScript server requests easier also provide libraries that often make event handling more standardized between browsers. If you need to work with the screen or keyboard, you would be best off investigating the current Ajax libraries.

• Return false from an event handler to prevent the browser from executing its default response after your handler has finished execution.
• The old style of setting event handlers inline in HTML tags is discouraged.
• The traditional style of setting object event handler properties is common, but suffers from not being easy to attach multiple handlers to a single event.
• The new style for adding event handlers allows for fine tuning of the events you want to handle and when you want to handle them.
• The new style for adding event handlers can be applied to more than just HTML elements.
• The new style for adding an event handler is: element.addEventListener(event, function, useCapture)
  • element: the element that would receive the event notification
  • event: the event you want to handle
  • function: the handler for the event
  • useCapture: default is false, refers to when event is seen
• The new style for removing an event handler is: element.removeEventListener(event, function, useCapture)
• Internet Explorer prior to IE9 use attachEvent and detachEvent for the new style.
• It is difficult to guarantee compatability across all browsers at this point with the new style, but polyfills are available for most of the functionality.
• Note that the properties that contain event handlers start with "on", but the events themselves do not have the "on" prefix.

• Due to restrictions on what JavaScript is allowed to do in some browsers, some of these window event handlers may not be very useful now.
• onload: fires when the document is done loading
• onresize: when the window changes size
• onmove: when the window moves
• onfocus: when the window becomes the active window
• onblur: when the window loses focus
• oncontextmenu: when the mouse is right clicked
• onscroll: sometimes used to zoom in and out
• Previous examples have used the window onload handler. It is useful to be able to place new onload handlers into a queue with existing onload event handlers.
• See event01.html to see how multiple onload event handlers can be set.

• onmousedown: when a mouse button is pressed
• onmouseup: when a mouse button is released
• onmousemove: when the mouse moves
• onmouseover: when the mouse moves over an element
• onmouseout: when the mouse moves off an element
• onclick: when the mouse is left-clicked once on an element
• oncontextmenu: when the mouse is right-clicked once on an element
• ondblclick: when the mouse is clicked twice quickly on an element
• See event03.html for an example of disabling context menus.
• See event04.html for an example of mouse movement detection.

• onsubmit: when the submit button is clicked; return false to abort form submission
• onreset: when the reset button is clicked
• onblur: when the form element loses focus
• onfocus: when the form element becomes the active element
• onselect: when text is selected
• onclick: when an element (usually a checkbox, radio button, or button) is clicked
• onchange: when a form element is changed
• oncopy: when content in an element is copied
• See event05.html for an example of handling form events
• See oncopy.html for an example of oncopy

• onkeydown: when a key has been pressed
• onkeyup: when a key has been released
• onkeypress: when a key has been pressed and then released
• See event06.html for an example of using some key event handlers.