webApi Day 5 - Detailed event
(three stages binding form the main content of the event event this part of the event object event flow (event bubbling event target event capture) the default behavior of the keyboard event to event drag)
a, event risk bubble :
a) :( concept of event bubbling and html nested structure has a relationship)
i happened when an object is an event (mouse click event on the event), which itself after the completion of the implementation of this event, will continue upward. transfer (to the parent who) the event, constantly passed up until the window; in the transfer process no matter what the parent has not done, it will receive the following event pass up; such an event delivery mechanism: the mechanism of bubble (One theory w3c specification defined)
ii. code demonstrates
b) event bubbling in the end good or bad? There are both good and bad
i Case 1: Share (use event bubbling event child elements of the parent element to do)
ii Case 2: pull-down menu expands contraction (we need to stop the event from bubbling)
If you block: In your it does not want the event trigger function bubbling inside use
(ev here must be compatible after the event object) ev.cancelBubble = true; to stop the event from bubbling
c) the event delegate:
i principle: the use event bubbling mechanism will. child element's event delegate to the agent to execute the parent, by judging event sources to do things, the benefits of doing so, the relationship between the parent does not need to change if the internal elements,
the dynamic changes within the sub-element is especially suitable
ii case: message frame deletion
Second, the flow of events - event capture
a) Event Capture concepts: Process event is passed from the outside inwards (IE browser does not support event capture) standard browsers support event capture
i presentation drawing.
II and the addEventListener attachEvent support for capture.
III sequence of code execution and writing. irrespective of the order and sequence of events related to the stream (code shows)
b) the flow of events (three stages)
i. event capture ----> event target ----> event bubbling
Third, we summarize the current common event
To be summary. . . . . .
Fourth, on the dimensions of some problems js:
width and height of a) visible area of the page
I document.documentElement.clientWidth.
II document.documentElement.clientHeight.
b) A.offsetParent find the nearest distance A parent attribute with positioning, if not directly to the body, and these two properties offsetLeft offsetTop going offsetParent its reference, an offset relative to the left and top offset offsetParent
c) offsetWidth offsetHeight these two properties can directly obtain the actual element width / height of about + / + padding around the vertical / vertical border
D) from the inside of the box clientLeft clientTop external offset (frame thickness) from the net effect is a frame
e) clientWidth clientHeight these two properties can directly obtain the actual element width / height of about + / vertical padding
F) the scrollLeft scrollTop
I. If the acquisition is a rolling page vertical scrolling distance need to be compatible at
var scrollT = document.documentElement.scrollTop || document.body.scrollTop
of Ii. .scrollTop common elements may be provided may be acquired
g) scrollWidth scrollHeight
Five key events:
A) keyDown keyUp
b) keyCode
c) assist key altKey shiftKey ctrlKey
d) cases:
. I send QQ Case
ii keyboard to control a small plane to go.
Iii advanced version of the small aircraft can go sideways and limits.
Fifth, the event's default behavior
a) concept:
b) the default behavior of the browser: space picture right drag menu
c) return false as well as other methods
d) case: custom right-click menu
six, drag events:
a) Div drag
b) drag and drop images