Event Objects and handlers

Client-side JavaScript programs use an asynchronous event-driven programming model. An object is a construct with properties that are JavaScript variables or other objects. An object also has functions associated with it that are known as the object’s methods.

The event object is a browser object used to get information about a particular event specified. Using event object, user can access information about event happenings. The difference between event object and Event object is such that the latter gives constants that can be used to identify events, while the former is used to get information about events. JavaScript events are items that transpire based on an action. A document event is the loading of an HTML document. A form event is the clicking on a button. Events are objects with properties.

  • x -Mouse x coordinate when the event happened.
  • y -Mouse y coordinate when the event happened.

JavaScript defines five types of events which are form, image, image map, link, and window events.

Events are associated with HTML tags. The definitions of the events described below are as follows:

  • abort – A user action caused an abort of an image or document load.
  • blur – A frame set, document, or form object such as a text field loses the focus for input.
  • click – Happens when a link or image map is clicked on
  • change – Happens when a form field is changed by the user and it loses the focus.
  • error – An error happened loading a image or document.
  • focus – A frame set, document, or form object such as a text field gets the focus for input.
  • load – The event happens when an image or HTML page has completed the load process in the browser.
  • mouseOut – The event happens when the mouse is moved from on top of a link or image map
  • mouseOver – The event happens when the mouse is placed on a link or image map.
  • reset – The user reset the object which is usually a form.
  • submit – The user submitted an object which is usually a form.
  • unload – The object such as a framesed or HTML document was exited by the user.

Event Handler – Applications register their event handler functions with the web browser, specifying an event type and an event target. When an event of the specified type occurs on the specified target, the browser invokes the handler. Event objects are passed as an argument to the event handler function. Event handlers are linked to HTML tags as

Syntax Example                 
onEvent = “Code to handle the event” <input type=”button” value=”Click Me!” onclick=”window.alert(‘Hi!’);” />

Back to Tutorial

Share this post
[social_warfare]
Conditionals and loop statements
Capture and release events

Get industry recognized certification – Contact us

keyboard_arrow_up