edit-article

Article Description: events, event handlers, ] the 2 different event handling mechanisms ( capture & bubbling )

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">events, event handlers, ...</h1> <h2>[WHAT]</h2> <ol> <li>] html elements have events like ( click, double-click, mouse-enter, hover, <span style="text-decoration: line-through;">mouse-exit,</span> change, onkeypress, onkeydown, onkeyup, onload, onunload, onmouseover, onmouseout, load, unload, abort, error, submit, reset, select, change, blur, resize, scroll &nbsp;)</li> <ol> <li>OBJECT -</li> <li>BODY -</li> <li>FORM -&nbsp;</li> </ol> <li><strong>] browser objects have events like (load,)</strong></li> <ol> <li>] you write code (event handlers) to respond/react to the 'events' that are occuring on the page</li> </ol> <li><strong>] eventing models&nbsp;</strong></li> <ol> <li>] event capture (most browsers) VS - with the event capture model, you write an 'event listener'</li> <li>] event bubbling (ie) - microsofts ie browser has a different event&nbsp;mechanism where events 'bubble' up through the dom,</li> </ol> <li>]&nbsp;</li> <li>]&nbsp;</li> </ol> <h2>[WHY]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[WHERE]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[WHEN]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>] event handler</li> <li>] event capture</li> <li>] event bubbling&nbsp;</li> </ol> <h2>[HOW-TO]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>]&nbsp;<a href="http://www.w3.org/wiki/Handling_events_with_JavaScript">http://www.w3.org/wiki/Handling_events_with_JavaScript</a></li> <li>]&nbsp;<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">http://www.w3.org/TR/DOM-Level-2-Events/events.html</a>&nbsp;- spec, list of all events,&nbsp;</li> <li>]&nbsp;<a href="http://www.w3.org/TR/DOM-Level-3-Events/">http://www.w3.org/TR/DOM-Level-3-Events/</a>&nbsp;- spec, latest draft&nbsp;</li> <li>]&nbsp;<a href="http://ie.microsoft.com/testdrive/HTML5/ComparingEventModels/">http://ie.microsoft.com/testdrive/HTML5/ComparingEventModels/</a>&nbsp;- ie implementation of latest draft</li> <li>] HTML&nbsp;event&nbsp;functions JavaScript&nbsp;Effects&nbsp;and animations&nbsp;$</li> </ol> <h1 style="text-align: center;">&nbsp;</h1>