Event in the context of a web page is occurrence of something interesting in page. It can be a click, hover or data load. We can listen to event using handlers. Since all Firefox, Chrome, Opera and Safari implemented core DOM level 2 events, Event handling is similar in all browsers except IE, which still use proprietary event system.
Event handling is bit tricky thing in JavaScript, assume that you click a button in an web page. By clicking that button you will also click container div of button and also the page that contains this button. Deciding which target fire event first is what we describe as Event flow. Different browsers handle event flow differently.
IE kind of event flow called as Event Bubbling, in which Event capturing starts from most specific target and bubbles up till document object.
Say we have an html page with following html code
<html>
<head>
<title> Event Bubbling Example < /title>
</head>
<body>
<div id=”myDiv”> Click Me < /div>
</body>
</html>
Clicking on div, event capturing happens from div -> body -> html -> document flow.
Netscape came up with alternate approach called Event Capturing where it works in opposite way, event get captured in opposite order document -> html -> body -> div.
DOM level 2 events has 3 phases: event capturing, target and event bubbling. Event capturing occurs first, starts with topmost object of the page, and moves towards actual target. Phase 2 is when event reach actual target which is in above case is "div". The final phase is bubbling, which starts from actual target and moves towards topmost document/window object. Ever at-target phase is a different phase all together, but some Browers like Safari, Firefox have "at-target" appended to capturing phase. Hence you can capture event in both the faces.
Please note that IE doesn't support DOM event flow.
Sunday, August 15, 2010
Monday, August 9, 2010
Beauty of Javascript
Javascript is the buzz humming around web and internet today. Being able to use javascript extensively is very important for a web dev. be it a simple personal portfolio or complicated application javascript and javascript libraries let you do cool stuff which our predecessors 10 years back, didn't even imagine.
If you look back in history Javascript has developed from "onclick" "onchange" to superior heights. Here is a try to capture some of it's beauty in lines.
If you look back in history Javascript has developed from "onclick" "onchange" to superior heights. Here is a try to capture some of it's beauty in lines.
Subscribe to:
Comments (Atom)