Event Order
ref:
Two models
Not surprisingly, back in the bad old days Netscape and Microsoft came to different conclusions.
Netscape said that the event on element1 takes place first. This is called event capturing
Microsoft maintained that the event on element2 takes precedence. This is called event bubbling
The two event orders are radically opposed. Explorer only supports event bubbling. Mozilla, Opera 7 and Konqueror support both. Older Opera's and iCab support neither.
Event capturing
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
the event handler of element1 fires first, the event handler of element2 fires last.
Event bubbling
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
the event handler of element2 fires first, the event handler of element1 fires last.
Event Targeting
The most deeply nested element that caused the event is called a target element, accessible as event.target.
event.target – is the “target” element that initiated the event, it doesn’t change through the bubbling process.
this – is the “current” element, the one that has a currently running handler on it.
For instance, if we have a single handler form.onclick, then it can “catch” all clicks inside the form. No matter where the click happened, it bubbles up to <form> and runs the handler.
-----------------------------------
| element1 This |
| ------------------------- |
| |element2 target | |
| ------------------------- |
| Event Targeting |
-----------------------------------
In form.onclick handler:
this (=event.currentTarget) is the <form> element, because the handler runs on it.
event.target is the concrete element inside the form that actually was clicked.
Closure
Lexical Environment
Function Declaration
!important
variables are proecessed when the execution reaches them but functions are processed when a lexical environment is created(when script starts)! So you can use:
