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
- 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
Brush up on your CSS - devguru.com
- 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...