Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do you have a real web strategy? Persuasion Technologies
  • HomeHome
  • About UsAbout Us
  • ContactsContacts


Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

You may be interested in

ASP.NET 301 permanent redirects: the best solution

ASP.NET 301 permanent redirects: the best solution

Have you changed your domain and don't want to loose your SEO page rankings?

jQuery: how to throw and handle custom events

JavaScript events can be uniformed and very simplified using jQuery.

Last published

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.

Can engineering industry sponsor art without going off topic?

How to design a page in an exhibition catalog of Biennale in Venice, for a customer who apparently has nothing to do with art.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Editor's pick

Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.

Stay informed on digital strategies

My reviews on the subject...

I have many books on web design, the list is quite long, especially if I have to include all those which deal strictly to programming. I shall therefore refer you to some interesting texts. Don't Make Me Think! is the most famous book on usability, you can not miss it if you're involved in web design.

RSS feed

JavaScript events? What a mess!

Published on 10/28/2011
Categories: Web Design
JavaScript events? What a mess!

The JavaScript events paradigm has three implementations, but all incompatible each other.
Let's try to put some order and to understand which one to use and when.

The original DOM 0 model

It's the base model, the first implemented, supported by all browsers, but with big limitations.
In practice the event handler is handled like a property of the objects that fires the event.

myButton.onsubmit = myObject.onsubmiteventhandler;

This means two important things:

  • You cannot set more than one event handler for each event, the last one that you set will substitute the previous one.
    Note that it is possible to set the same event handler for different events.
  • If you use the this object inside the event handler, this will refer to the firing object (myButton in the example) and not to the one that handles the event (myObject), as it happens in the classical Windows programming.

If the previous limitations are not a problem, for compatibility reasons this is without doubt the model to use.

The advanced DOM 2 model

It' the evolution of the previous one, but actually it's not supported by Internet Explorer versions older than 9.

document.myForm.myButton.addEventListener("submit", function(e) { ... }, false);

Or if you want to subscribe one object's method (note that Firefox allows to use the first method to directly pass object's methods):

document.myForm.myButton.addEventListener("submit", function(e) { myObject.onsubmiteventhandler(e); }, false);

Offers the following additional features:

  • You can register more event handler for the same event.
  • Every event handler has as a parameter an Event object with all significant event data.
  • If you  subscribe more times the same event handler, all the subscriptions after the first one are ignored.
  • The events are propagated in three consecutive phases:
    1. Capturing Pahase: the event is propagated from the Document objects following the descendants chain to the final object that subscribed to the event, to verify if any ancestor has set the event capturing (the third boolean event of addEventListener specifies if the event handling has to occur during this phase).
    2. Target Node: the event is handled by the subscribed object.
    3. Bubbling Phase: the event returns to the root node, from the subscribed node to the Document object.

In every moment the propagation can be interrupted by any event handler calling stopPropagation().
Regarding the this object, unfortunately there's no standardization, the most diffused interpretation is identical to the DOM 0 level.

Internet Explorer model

It's supported only by Microsoft's browsers, it's similar to DOM 2, but with some important differences.

document.myForm.myButton.attachEvent("onsubmit", function(e) { ... });

  • I does not implement the Capturing Phase during event propagation (in fact the third parameter is missing).
  • If you subscribe more times the same event handler, this will be invoked more times.
  • The Event object is not passed as a parameter to the event handler, but it's a global variable (window.event): this is not a problem because JavaScript programming it's single-threaded.
  • The this object inside event handlers refers to the global window object.

Let's take a look now to a typical example about handling all these implementations.
It happens frequently to subscribe an event handler for the page load completion, but if we have to use the DOM 0 APIs, there will be the risk to override another previously subscribed event handler. To solve this situation use the following function.

function subscribeOnLoad(eventHandler)
    // Check if DOM 2 level APIs are available
    if (typeof window.addEventListener != "undefined")
        window.addEventListener("load", eventHandler, false);
    // ...otherwise check if Internet Explorer APIs are available
    else if (typeof window.attachEvent != "undefined")
        window.attachEvent("onload", eventHandler);
    // ...otherwise use DOM 0 level APIs
        // ...if there's already an event handler
        if (window.onload != null)
            var exsistingOnLoad = window.onload;
            window.onload = function (e)
                { exsistingOnLoad(e); window[eventHandler](); };
            window.onload = eventHandler;

See also

jQuery: how to throw and handle custom events

JavaScript events can be uniformed and very simplified using jQuery.

You are the reader number 5,472.


comments powered by Disqus
Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Centering text with CSS

Next article

Style sheets caching problems

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed

Scroll to top