JavaScript Event

How to handle the event object?

JavaScript event handling is a bit incompatible between IE and other browsers. So if you have not clear picture of what the difference then it'll be difficult to write proper event handling code in javascript that will work swimmingly in different browsers. By default when an event will be fired and you have bound some event handler code to handle that event, the event object should be passed automatically to the function. Though all browser works this way, Surprisingly the IE browser works different way. IE doesn't pass the object directly rather you need to access it through window object. So in an event handler you need to write code in any of the two ways as shown below to get the event object:

        function eventHandler(e) {

            e = e || window.event;

        }

        function eventHandler(e) {

            if (!e) {

                e = window.event;

            }

        }

In the first event handler, the OR operator (||) is used to take e if e is not null. If e is null then window.event is used (for IE). In the second handler above the shorthand OR is written in more elaborately.

 

How to prevent the default behavior of an event?

Now let think you have an anchor and when user will click on the anchor you need to do some validation on client side and if the validation is passed then you want the anchor url to be navigated. If validation is not passed then you want to prevent the user to move the url. So you need to write javascript code to prevent the anchor's default behavior (will navigate to the href defined). You can do so by calling event object's preventDefault method. But IE doesn't support preventDefault. Rather you need to use returnValue.

 

        function eventHandler(e) {

            e = e || window.event;

            // Prevent the default action of an event

            if (e.preventDefault) {

                //For Non-IE

                e.preventDefault();

            } else {

                //For IE

                e.returnValue = false;

            }

        }     

 

 

Event bubbling and how to prevent it?

When an event is fired in an element in javascript DOM and the event is not handled in the element then the event is passed to the parent of the element. If the event is not handled in the parent element the event is propagate to the upper. So this is called event bubbling. There's another model called event capture. You can read more details about event model from here. For all browsers except IE we can call the event object's stopPropagation method to prevent event bubbling. But for IE, we need to set cancelBubble to true. The code snippet below shows how we can write a cross-browser compatible javascript code.

            // Stop event from bubbling up: 

            if (e.stopPropagation) {

                // W3C compliant browsers: 

                e.stopPropagation();

            } else {

                // IE: 

                e.cancelBubble = true;

            }

 

Filter event by checking the source of the event

Sometimes we need to check the source of the event. We can do so applying event delegation technique. For example we have a table of data and whenever a row is clicked, we need to handle the event. Rather than writing event handler for each of the tr/td we can write an common handler and check the source element in that event handler and take necessary actions. The technique is called event delegation. With Event delegation we can apply event handler to an element and using this as a basis for manipulating its children element. In all browsers except IE you can access the source element of the event by accessing target property of the event. For IE you need to use srcElement.

            var targetNode = e.target || e.srcElement;

            // Test if it was a TR that was clicked: 

            if (targetNode.nodeName.toLowerCase() === 'tr') {

               

            }

 

Event delegation relies on event bubbling. The above code wouldn't work if the bubbling was halted before reaching the 'table' node.