JavaScript event-handling

Javascript which existed for some scripting works almost turned into a programming language. There are lots of Javascript libraries to do some animation works such as a floating text animation or some little games. To build these libraries, developers benefit from Javascript’ s object-oriented and event-driven features.

Javascript is an event-driven scripting language which means when a specific action occurs on a web page, you take a reaction- that is, for example a display message. After you make the action there is a cycle until you take the reaction.

Following shows a summary of this process.

  1. When a certain event occurs to act on a specific target object of a web page, it is dispatched and then an event object is created.
  2. This object is passed to functions which are registered to the target object before.
  3. Functions run and a reply is created. They are called Event-Handlers since they handle a specific work when an event occurs. They are also called Event-Listeners since they listen events to happen to handle a specific work. Besides, some authors use “Callback” name.

There are two kinds of events in Javascript.

  • Built-in (i.e. click, hover, load, keypress)
  • User Defined (i.e. myEvent)

To handle these events, we can define event-handlers have names such as “xxxOnload”, “xxxListener”. To register these handlers to target objects javascript uses several approaches. The following shows them.

  1. Inline:

    onclick="function();" is written near tag name.
  2. By using built-in onxxx properties of objects:

    window.onload = function() {....};

    This approach has a drawback. Since onload is a built-in property of window object, only one specific event-handler can be attached to it. If you have an external library , for example a floating text animation, which uses window.onload event-handler to do something when page loads and then one day if you decide to use an other external library which also uses some code to do something when page loads, your library calling code which places after other one will be overridden. Therefore, one of your scripts doesn’t work.
  3. In software engineering perspective:
    window.addEventListener("load",function() {...},false);
    This approach overcomes the drawback i mentioned above, since it doesn’t use built-in onXXX properties. However, this time we have problems about cross browser scripting. When i was talking about event architecture, i skipped some details about event flow for clarity. There are two types of event flow is used by browsers. IE uses event bubbling and Firefox uses event-capturing. The third parameter of addEventListener method says wheter event capture will be used.

    addEventListener method of DOM objects is defined in DOM Level 2. Since IE uses its own implementation this method doesn’t work on IE. IE uses attachEvent() instead of addEventListener(). It also do the same work, but its name is i think insufficient to imply its aim. Its name might be attachEventHandler(). Also, first parameter values take “on” prefix and it doesn’t have third parameter.
    window.attachEvent("onload",function() {...});

Advertisements

Leave a comment

Filed under Web Programming

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s