Jul 3, 2007

Event Object, this, stopbuble, canceldefalt,

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.


            // 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;
            };

            

The this Keyword

            // Find all 
  • 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"; }
  • Stopping Event Bubbling

    This function can be called in side a event handler

                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;
                }
                }
    
                

    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.

    Event Default action

    Default actions can be summarized as anything that the browser does that you do not explicitly tell it to do. For example

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

                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
                }
    
                

    The code makes all the links on a page load in a self-contained