Jquery 1.4: Events

Front 1

describe the DOM Level 0 Event Model

Back 1

This is an informal term used to describe how the DOM behaved before W3C released the first standard (DOM Level 2)

Front 2

explain the expanded syntax that occurs in the background when the following html is parsed:

<button onclick="this.value='clicked'" />

Back 2

Javascript creates a function similar to this:

button.onclick = function(event) {
this.value = 'clicked';
}

Front 3

explain the purpose of this:

if( !event ) { event = window.event; }

Back 3

IE doesn't pass the event appropriately, instead it stores it on the window object. This is a common method for cross-browser compatibility.

Front 4

what is the equivalent of the W3C standard event.target in IE?

Back 4

window.event.srcElement

Front 5

explain the basic concept of event bubbling

Back 5

events happen on the element activated, then "bubble up" to the parent element and so on all the way up to the document, unless something stops propagation

Front 6

explain how to cancel event propagation (bubbling) in standards compliant browsers

Back 6

stopPropagation()

Front 7

explain how to cancel event propagation (bubbling) in IE

Back 7

set window.event.cancelBubble to true

Front 8

explain why the addEventListener(eventType, listener, capture) method was added in DOM Lev. 2

Back 8

Because only one method could be assigned as a listener at a time; this allows multiple functions to be assigned to each event

Front 9

explain the primary difference in event propagation (bubbling) between DOM 0 and DOM level 2

Back 9

Events bubble up from the document to the element, and then back down again instead of just down from the element (if useCapture is false)

Front 10

explain the "capture phase" in DOM level 2

Back 10

this is the root to target phase, where event bubbles up from document root to the target element

Front 11

explain the "bubble phase" in DOM level 2

Back 11

this is the target to root phase; event propagates from the target element back up to document root

Front 12

explain IE's support for DOM Level 2

Back 12

It doesn't support it; it supports a proprietary bubble phase, but does not support the DOM's standards for bubble or capture phases

Front 13

explain the IE equivalent for addEventListener

Back 13

it uses attachEvent(eventName, handler)

note that there is no useCapture!

Front 14

explain the purpose of bind()

Back 14

Establishes a function as a listener to handle events of the type provided when triggered by any element in the wrapped set

Front 15

explain eventType in bind(eventType, data, handler)

Back 15

(String) event that is to be monitored (click, load, etc), multiple events can be a space separated list

Front 16

explain data in bind(eventType, data, handler)

Back 16

Object passed here is attached to the Event instance and passed to handler whenever it is invoked

Front 17

explain handler in bind(eventType, data, handler)

Back 17

Function that will be called when eventType occurs. The Event instance is passed to this handler and 'this' context is set to the current element in the bubble phase

Front 18

explain eventMap in bind(eventMap)

Back 18

A JS Object that allows multiple handlers to be assigned in a single call. Each element of the Object is a key naming the event type and a value containing the handler (same as calling bind(eventType, handler) on each element of the object)

Front 19

name all the keyboard related event types for bind()

Back 19

keydown
keypress
keyup

Front 20

name all the focus and form related event types for bind()

Back 20

focusin
focusout
focus
blur
submit
select
change

Front 21

name all the mouse related event types for bind()

Back 21

mousedown
mouseup
mouseenter
mouseleave
mousemove
mouseout
mouseover
scroll

Front 22

name all the page related event types for bind()

Back 22

load
unload
ready
resize
error

Front 23

which two event types do not bubble up the DOM tree?

Back 23

focus and blur - use focusin and focusout for bubbling

Front 24

explain the purpose of focusin and focusout

Back 24

focus and blur do not bubble up the dom tree - focusin/out provide alternatives that do bubble

Front 25

define one()

Back 25

establishes a callback as the event handler for a method and automatically remove it after called (use it only once)

Front 26

define unbind(eventType, listener)

Back 26

removes listener from the wrapped set's event listeners for eventType

Front 27

define unbind(event)

Back 27

removes the listener that triggered the Event passed as a parameter

this can also be a selector to be matched, such as $('*').unbind('.myListeners');

Front 28

which method allows an event listener to be canceled (removed) from the list of callbacks?

Back 28

unbind()

Front 29

explain jQuery.Event.altKey

Back 29

true if the alt key was pressed when event triggered, this in the option key on Mac

Front 30

explain jQuery.Event.ctrlKey

Back 30

true if control key was pressed when event triggered

Front 31

explain jQuery.Event.currentTarget

Back 31

current element during bubble phase. This is the same object set as the function context 'this'

Front 32

explain jQuery.Event.data

Back 32

a value, if any, that was passed to the bind() method when the listener was established

Front 33

explain jQuery.Event.metaKey

Back 33

true if the command key on mac or the control key on windows was pressed when the event triggered

Front 34

explain jQuery.Event.pageX

Back 34

the horizontal coordinate of the mouse event relative to page origin

Front 35

explain jQuery.Event.pageY

Back 35

the vertical coordinate of the mouse event relative to page origin

Front 36

explain jQuery.Event.relatedTarget

Back 36

for mouse events, identifies the element the cursor left or entered when the event was triggered

Front 37

explain jQuery.Event.screenX

Back 37

for mouse events, the horizontal coordinate of the event relative to screen origin

Front 38

explain jQuery.Event.screenY

Back 38

for mouse events, the vertical coordinate of the event relative to screen origin

Front 39

explain jQuery.Event.shiftKey

Back 39

true if shift key was pressed when event triggered

Front 40

explain jQuery.Event.result

Back 40

the prior result returned from an event handler that was not undefined

Front 41

explain jQuery.Event.target

Back 41

the element for which the event triggered

Front 42

explain jQuery.Event.timestamp

Back 42

time in milliseconds when event triggered

Front 43

explain jQuery.Event.type

Back 43

specifies the type of event triggered (i.e. 'click') - useful when using an event handler for multiple types

Front 44

explain jQuery.Event.which

Back 44

For keyboard events, specifies the numeric code of the key that caused the event

For mouse events, specifies the button pressed (1=left, 2=middle, 3=right)

Front 45

explain the difference between jQuery.Event.which and Event.button

Back 45

The .button property doesn't function reliably across browsers; jQuery's which resolves this

Front 46

explain jQuery.Event.preventDefault()

Back 46

Prevents any default action from occuring (form submit, radio button selection, link click, etc)

Front 47

explain jQuery.Event.stopPropagation()

Back 47

Prevents bubbling--the event is not passed up to any parent elements in DOM to see if they have event handlers

Front 48

explain jQuery.Event.stopImmediatePropagation()

Back 48

stop all event propagation, including additional events on the current target

Front 49

explain jQuery.Event.isDefaultPrevented()

Back 49

true if preventDefault() method has been called on 'this'

Front 50

explain jQuery.Event.isPropagationStopped()

Back 50

true if stopPropagation() has been called

Front 51

explain jQuery.Event.isImmediatePropagationStopped()

Back 51

true if stopImmediatePropagation() has been called

Front 52

what happens if a callback listener attached using bind() returns false when it is invoked?

Back 52

stops propagation of the event and cancels the default behavior--does not cancel _immediate_ propagation

Front 53

explain the differences of Event.keycode and jQuery.Event.which

Back 53

keycode does not return reliably across browsers

Front 54

explain the basic purpose of live()

Back 54

attaches event listeners (handlers) to a css selector; any time an element matching the selector fires the specific event, the handler is triggered

this occurs even if the element didn't exist when the handler was set

Useful for AJAX calls

Front 55

explain eventType in live(eventType, data, listener)

how is it different from bind()?

Back 55

the type of event the handler is invoked for

unlike bind(), this can't be a space separated list

Front 56

what method can be used to attach event listeners (handlers) to a css selector?

Back 56

use live()

Front 57

how can events be triggered on elements that are added to the page after the event listener is established?

Back 57

use live() and a css selector

Front 58

explain data in live(eventType, data, listener)

Back 58

Object passed to handler by attaching it to the Event whenever the handler is called

If missing, the handler can be passed as the second param

Front 59

explain listener in live(eventType, data, listener)

Back 59

Function that should be invoked when eventType occurs, it is passed the Event object and 'this' context is the element that triggered the event

Front 60

explain any important considerations while mixing listeners bound by live() with ones bound using bind()

Back 60

live() events are fired after bind()
live() events do not propagate

Front 61

is the following legal? why or why not?

$('div').closest('p').live(...)

Back 61

No, live() only works on css selectors and not derived sets

Front 62

how are event handlers bound with live() removed?

Back 62

using die()

Front 63

explain eventType in die(eventType, listener)

Back 63

the DOM event to stop listening for (e.g. 'click', 'load', etc)

if not provided, listener is removed for all event types

Front 64

explain listener in die(eventType, listener)

Back 64

Function, specifies the specific listener to be removed. If not provided, all listeners are removed.

Front 65

Explain how to trigger an event handler on a specific element

Back 65

use trigger(eventType, data)

Front 66

explain eventType in trigger(eventType, data)

Back 66

the event type to listen for (e.g. 'click', 'load', etc)

Front 67

explain what happens if an ! is appended to eventType in trigger(eventType, data)

Back 67

namespaced events are not triggered

Front 68

explain how to define a namespace on event listeners

Back 68

for bind(eventType, data, handler), simply append the eventType with a .name

for example: bind('click.myNamespace', ... )

Front 69

explain how to only remove event listeners that belong to a specific namespace

Back 69

for unbind(eventType, listener), add .namespace to the eventType

examples:
$('*').unbind('click.myNamespace', ...); // only clicks
$('*').unbind('.myNamespace'); // all event types in myNamespace

Front 70

how can multiple event types be specified for eventType in bind(eventType, listener)

Back 70

separate the event types with a space

example: bind('click focus keypress', ...)

Front 71

true or false: calling jQuery's trigger() method invokes event propagation

Back 71

true

Front 72

when using trigger() how can namespaced events be avoided?

Back 72

add an ! to the eventType, such as "click!"

Front 73

true or false: calling trigger() can fire semantic actions (e.g. form submit)

Back 73

true

Front 74

true or false; calling triggerHandler() can fire semantic actions (e.g. form submit) and causes event propagation

Back 74

false, use trigger() to fire actions and cause propagation

Front 75

true or false: events bound by live() are triggered when trigger() method is invoked

Back 75

true

Front 76

true or false: events bound by live() are triggered when triggerHandler() is invoked

Back 76

false - use trigger() to invoke them

Front 77

define triggerHandler(eventType, data)

Back 77

triggers event of type given for the matched set and passes data as part of the event.

unlike trigger() this does not cause event propagation or semantic actions to fire and does not fire events bound by live()

Front 78

explain the basic purpose of the toggle() method

Back 78

for toggle(listener1, listener2, ... )

establishes the passed functions as listeners in a circular list

so the first time the event fires, listener1 is called, the second time, listener 2 is called, and so on

Front 79

true or false: only two handlers can be passed to toggle()

Back 79

false, the name is for backwards compatibility, but it accepts any number of handlers

Front 80

explain the difficulty with using mouseover and mouseout, when an element has chidren

Back 80

the mouse over/out events are fired both when the parent element is entered and exited and when the child element is entered (as if the parent has been left)

Front 81

what method can be used as an alternative to mouseenter() and mouseleave()?

Back 81

the hover() method

Front 82

explain hover()

Back 82

for hover(enter, leave), calls the enter event onmouseenter and the leave event onmouseleave

Front 83

Explain how to create a custom event handler

Back 83

Use the bind() or live() methods and use a custom name in place of the normal event type:

$('...').bind('customEventName',handler);

Front 84

Explain how to trigger a custom event handler

Back 84

Once the handler is defined with live() or bind(), it may be triggered like any other event handler:

$('...').trigger('customEventName')