DHTML Utopia Modern Web Design Using JavaScript & DOM- P11

DHTML Utopia Modern Web Design Using JavaScript & DOM- P11:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P11 Chapter 7: Advanced Concepts and Menus function mover(e) { var el = window.event ? window.event.srcElement : e ? e.currentTarget : null; ... This works fine for browsers that support the standard event model, but remember that Internet Explorer doesn’t. And although IE uses window.event.srcElement as equivalent to the standard target property, IE has no equivalent to the currentTarget property. In order to get the element to which the event listener was assigned in IE, we’ll have to be slightly more creative. Instead of using the mover and mout functions directly as the mouse event listeners for all of the submenu headers, we’ll create a custom pair of listener functions for each one. Those custom listener functions will, in turn, call mover and mout, but will pass them the reference to the partic- ular li that we need. Let’s look at the code changes. First, in our init function, we alter the addEvent calls that assign our event listeners: File: sliding-menu-6.js (excerpt) addEvent(node, mouseover, getMoverFor(node), false); addEvent(node, mouseout, getMoutFor(node), false); Instead of assigning mover and mout as the listeners, we call new functions getMoverFor and getMoutFor. These functions will create custom listener func- tions for the submenu header in question (node): File: sliding-menu-6.js (excerpt) function getMoverFor(node) { return function(e) { mover(e, node); }; } function getMoutFor(node) { return function(e) { mout(e, node); }; } As you can see, getMoverFor and getMoutFor create and return new event listener functions that call mover and mout, respectively, passing not only the event object, but a reference to the submenu header element, node. Because this listener function is created inside the getMoverFor/getMoutFor function, it can access any of the local variables that exist in that environment, including the node argument. The act of taking a function that has access to a 180Licensed to siowchen@darke.biz Making Submenus Appear private environment and making it accessible (as an event listener) from outside that environment is known in computer science circles as “creating a closure.” We’ve actually done this once before, in Chapter 5, when we created a function that had access to a local variable and passed it to setTimeout. If you’re curious about closures, an excellent (if heavy-going) discussion of them, written by Richard Cornford, is available online.2 For the purposes of this example, however, it’s sufficient to understand that creating a custom event listener for each of the submenu headers allows us to reference that header when the listener is called. Speaking of referencing the header, we now need to modify mover and mout to make use of the reference that’s passed as a second argument by the custom event listeners: File: sliding-menu-6.js (excerpt) function mover(e, targetElement) { var el = window.event ? targetElement : e ? e.currentTarget : null; if (!el) return; ... } function mout(e, targetElement) { var el = window.event ? targetElement : e ? e.currentTarget : null; if (!el) return; ... } These functions use the currentTarget property on W3C DOM-compliant browsers; in Internet Explorer, where this property is not available, the second argument, targetElement, contains the needed value.3 Try this updated script and you’ll find that it works rather well (though not quite perfectly). The changes we’ve made allow the submenus to appear and stay visible, but the succession of events still hides the submenu, then shows it again very quickly, which causes a lot of flicker. 2 http://jibbering.com/faq/faq_notes/closures.html 3 Indeed, you could use targetElement on all browsers and do away completely with ...