The basic concept: Dom-level events
- Dom0 level element.onclick = function () {}
- Dom1 not developed events related
- Dom2 element.addEventListener ( "click" function () {}, false // capture or bubbling)
- Dom3 element.addEventListener ( "keyup" function () {}, false // capture or bubbling) new mouse keyboard events
DOM event model: Capture bubbling
Capture: from the top down
Bubble: the current element up
DOM event flow
How to spread the browser page response to the current page with the left mouse button in response to user interaction, such as
1. events by capturing
2. target element (target period)
3. uploaded to the window object (bubble)
DOM event capture specific process
Object window first received event
----- document ----- html tags ---- body --- parent element - the target element child ---
Common Application Event 1 Event principle object // register the listener 3 2 how common application response event
event.preventDefault () to prevent the default event
event.stopPropagation () to stop bubbling
event. stopimmediatePropagation () A two click events registered in this event prevent Bclick
How event.currentTarget // for loop optimization sub-dom element event events registered agent to the parent element
event.target
Custom event (simulated events)
var eve = new Event("custome")
ev.addEventListener("custome",function)
ev.dispatchEvent (eve) // trigger event