Window.onload Vs Document.ready Download

Copy and paste this link to your website, so they can see this document directly without any plugins.



Keywords

handler, listeners, event, execute, $(function, when, listener, handler), function, type, element, return, uses, document, (function, Function, Event, events, attaching, clicked, ready, standard, from;, window.addEventListener, (‘load’,, diagram?, element.onclick, element.addEventListener, (‘click’,, JQuery

Transcript

softwarestudio
events & listeners
Daniel Jackson
1
event classification
KeyboardMouse
Event
HTML
MouseDownClick MouseUp...
Int button
!
› this OM classifies events, not event types (hence button)
2
events & listeners
function
!?
EventType
target
EventNode
type
Event
Listener
listeners * type
!
Function
!
event
Function
Activation
function!
!
› what constraints apply that are not shown in the diagram?
3
attaching listeners in standard DOM
execute handler when document DOM is ready
› window.onload = handler
› window.addEventListener (‘load’, handler)
execute handler when element is clicked
› element.onclick = handler
› element.addEventListener (‘click’, handler)
4
attaching listeners in JQuery
execute handler when document DOM is ready
› $(document).ready(handler) or just $(handler)
execute handler when element is clicked
› element.click(handler)
› element.bind(‘click’, handler)
execute handler depending on event type
› element.bind({keydown: handler1, keyup: handler2})
can also trigger event manually
› element.trigger(‘myevent’)
5
listener uses event property







› how many listeners here? (clue: more than one)
6
listener acts on global variables




Dollars:

Euros:

7
listener uses local variable






8
element created with listener




...


9
what’s wrong with this?






10
event propagation
› Netscape: capturing
› Microsoft: bubbling
› W3C: support both
› IE8: still only bubbling
› JQuery, bubbling only
› end bubbling with
event.stopPropagation()
11


Shady Grove Aeolian Over the River,
Charlie
Dorian
Target
Phase (2)
Capture Phase (1) Bubbling Phase (3)
defaultView
document




Image by MIT OpenCourseWare.
MIT OpenCourseWare
http://ocw.mit.edu
6.170 Software Studio
Spring 2013
For information about citing these materials or our Terms of Use, visit: http://ocw.mit.edu/terms.

Online Document Converter

This website help webmasters to achieve a better user experience. Instead of putting a link to download their prices lists and another type of documents, you can simply send a special link to this service, and we will show your document to your users directly without the need of downloading a special application or installing another browsers plugin. Currently, we can read about hundred the most used database files. Moreover, your users can share this document directly on social networks, giving your document additional page views. By using this service, you can save costs by not overloading your own web server, give your users a better way to read documents online without any problems, and allow them to easily download converted copy for offline reading in a format they like.


Previous 10

Next 10