<p>The tricky part of the event object, however, is that Internet Explorer’s implementation
        is different from the W3C’s specification. Internet Explorer has a single global event object
        (which can be reliably found in the global variable property window.event), whereas every
        other browser has a single argument passed to it, containing the event object.</p>


        <pre data-sub="prettyprint:_">

        // Find the first textarea on the page and bind a keypress listener
        document.getElementsByTagName("textarea")[0].onkeypress = function(e){

        // If no event object exists, then grab the global (IE-only) one
        e = e || window.event;
        // If the Enter key is pressed, return false (causing it to do nothing)
        return e.keyCode != 13;
        };

        </pre>


        <h4>The this Keyword</h4>

        <pre data-sub="prettyprint:_">
        // Find all <li> elements and bind the click handler to each of them
        //this is supported in both IE and firefox, if attache event this way
        var li = document.getElementsByTagName("li");
        for ( var i = 0; i < li.length; i++ ) {
        li[i].onclick = handleClick;
        }

        // The click handler – when called it changes the background and
        // foreground color of the specified element
        function handleClick() {
        this.style.backgroundColor = "blue";
        this.style.color = "white";
        }
        </pre>


        <h4>Stopping Event Bubbling</h4>
        <p>This function can be called in side a event handler</p>

        <pre data-sub="prettyprint:_">
        function stopBubble(e)
        {
        // If an event object is provided, then this is a non-IE browser
        if ( e && e.stopPropagation )
        {
        // and therefore it supports the W3C stopPropagation() method
        e.stopPropagation();
        }
        else
        {
        // Otherwise, we need to use the Internet Explorer
        // way of cancelling event bubbling
        window.event.cancelBubble = true;
        }
        }

        </pre>


        <p>
        When do we need to stop the bubble of events? The majority of the time, you will probably never have to worry about it. The need for it begins to arise when you start developing dynamic application (especially ones that deeal with the keyboard or mouse). With the ability to stop the event bubbling, you now have complete control over which elements get to see and handle an event. This is a fundamental tool necessary for exploring the development of dynamic web applications. The final aspect is to cancel the default action of the browser, allowing you to completely override what the browser does and implement new functionality instead.
        </p>
        <h4>Event Default action</h4>
        <p>Default actions can be summarized as anything that the browser does
        that you do not explicitly tell it to do. For example</p>
        <ul>
        <li>Clicking an <a> element will redirect you to a URL
        provided in its href attribute.</li>
        <li>Using your keyboard and pressing Ctrl+S, the browser will attempt to
        save a physical representation of the site.</li>
        <li>Submitting an HTML <form> will submit the query data to the
        specified URL and redirect the browser to that location.
        </li>
        <li>
        Moving your mouse over an <img> with an alt or a title attribute (depending on the browser) will cause a tool tip to appear, providing a description of the <img>.
        </li>

        </ul>

        <p>All of the previous actions are executed by the browser even if you stop the event bubbling
        or if you have no event handler bound at all. This can lead to significant problems in
        your scripts. What if you want your submitted forms to behave differently? Or what if you
        want <a> elements to behave differently than their intended purpose? Since canceling
        event bubbling isn’t enough to prevent the default action, you need some specific code to
        handle that directly. As with canceling event bubbling, there are two ways of stopping the
        default action from occurring: the IE-specific way and the W3C way. Both ways are shown
        in Listing 6-8. The function shown takes a single argument: the event object that’s passed
        in to the event handler. This function should be used at the very end of your event handler,
        like so: return stopDefault( e );—as your handler needs to also return false (which is,
        itself, returned from stopDefault for you).
        </p>


        <pre data-sub="prettyprint:_">
        function stopDefault( e )
        {
        // Prevent the default browser action (W3C)
        if ( e && e.preventDefault )
        {
        e.preventDefault();
        }
        // A shortcut for stoping the browser action in IE
        else
        {
        window.event.returnValue = false;
        }
        }

        //or
        function stopDefault( e )
        {
        return false; //this is supported by both ie and firefox
        }

        </pre>


        <p>
        The code makes all the links on a page load in a self-contained <iframe>, rather
        than opening up a whole new page. Doing this allows you to keep the user on the page, and
        for possibly a more interactive experience.
        </p>

        <pre data-sub="prettyprint:_">
        // Let's assume that we already have an IFrame in the page
        // with an ID of 'iframe'
        var iframe = document.getElementById("iframe");
        // Locate all <a> elements on the page
        var a = document.getElementsByTagName("a");
        for ( var i = 0; i < a.length; i++ ) {
        // Bind a click handler to the <a>
        a[i].onclick = function(e) {
        // Set the IFrame's location
        iframe.src = this.href;
        // Prevent the browser from ever visiting the web site pointed to from
        // the <a> (which is the default action)
        return stopDefault( e );
        };
        }

        </pre>