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

      Idea R - Plan your visual communication at 360°
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

Blog

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

Change language... italiano

You may be interested in

Irritated by your blog performance? Boost it using the cloud!

Irritated by your blog performance? Boost it using the cloud!

Are you using the world's fastest hosting? If you have a bad architecture, your blog won't have a great performance. Here is the ultimate solution.

How to skip the CDN during ASP.NET development

How to inject the Content Delivery Network URL in the production website without having to hardcode it.

Last published

Can engineering industry sponsor art without going off topic?

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.

Milano Design Week 2017, Design Districts

Ventura Lambrate and Tortona, here are the best creations that we discovered in the 2 districts of the Fuorisalone Milan Design Week 2017.

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.
newsletter

Stay informed on digital strategies

RSS feed

JavaScript events? What a mess!

Published on 10/28/2011
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
    else
    {
        // ...if there's already an event handler
        if (window.onload != null)
        {
            var exsistingOnLoad = window.onload;
            window.onload = function (e)
                { exsistingOnLoad(e); window[eventHandler](); };
        }
        else
            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 4,462.

Comments

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
Blog

Scroll to top