Event Models

• Event Handlers as Attributes
• What we have been doing so far...
• <img src="image.jpg" alt="message" onclick="myFunction();">
• can contain any number of commands seperated by a ;

• Event Handlers as Properties
• Written in JS
• Set by objDOM.eventHandler=something;
• MUST be all in lower case!
• function doIt(){//some code here}
• document.getElementById("test").onmouseover=doIt;
• --Same as--
• document.getElementById("test").onmouseover=function() {//some code here};
• Can be powerful with the 'this' keyword

• Advanced Events
• Event Handler Registration (Gecko only!)
• addEventListener()
• document.getElementById('idName').addEventListener("mouseout",myFunct,false);
• removeEventListener()
• document.getElementById('idName').removeEventListener("mouseout",myFunct,false);
• *Note - with above, I can set more than one event handler per node (like 2 mouseout's)
• Event Types
• Event properties (read only)
• event.type
• event.target
• event.currentTarget
• event.eventPhase
• event.bubbles
• event.cancelable
• Event Propigation - Levels
• Level 0 DOM
• Events dispached directly to the element
• Level 2 DOM
• capture phase (event.eventPhase=1) - 'true' as 3rd argument above
• bubble phase (event.eventPhase=3) - 'false' as 3rd argument above
• Most Common usage
• can stop with: event.stopPropagation();
• check it out


• Event Handlers for IE
• attachEvent()
• document.getElementById('idName').attachEvent("onclick",myFunct);
• *can only attach one event per node

Build Event thingie...

DHTML & the 'style' attribute

• All styles are accessible
• find the element you want
• node.style.styleType=newValue;
• document.getElementById('IdName').style.color='#FF0000';
• Note - everything to the right of the '=' is ALWAYS a string (set or get)
• Working with Style Properties
• Can set or get any style property
• Any CSS rule that has a '-' in it is replaced wtih a Capital Letter:
• font-family becomes fontFamily in JavaScript
• margin-bottom becomes marginBottom in JavaScript
• etc...
• Some Examples:
• dom.style.fontWeight="bold";
• dom.style.top="200px";
• dom.style.border="solid black 2px"


• We can put together strings and numbers to do things like this:
• document.getElementById('xId').style.left=parseInt(document.getElementById('xId').style.left)-10+"px";

Build DHTML thingie...