W3C DOM4 第10次工作草案（W3C Last Call Working Draft 10 July 2014）

http://www.w3.org/TR/2014/WD-dom-20140710/

Table of Contents

1. Goals
2. 1 Conformance
   1. 1.1 Dependencies
   2. 1.2 Extensibility
3. 2 Terminology
   1. 2.1 Trees
   2. 2.2 Strings
   3. 2.3 Ordered sets
   4. 2.4 Namespaces
4. 3 Errors
   1. 3.1 Exception DOMException
   2. 3.2 Interface DOMError
   3. 3.3 Error names
5. 4 Events
   1. 4.1 Introduction to "DOM Events"
   2. 4.2 Interface Event
   3. 4.3 Interface CustomEvent
   4. 4.4 Constructing events
   5. 4.5 Defining event interfaces
   6. 4.6 Interface EventTarget
   7. 4.7 Dispatching events
   8. 4.8 Firing events
6. 5 Nodes
   1. 5.1 Introduction to "The DOM"
   2. 5.2 Node tree
      1. 5.2.1 Mutation algorithms
      2. 5.2.2 Interface NonElementParentNode
      3. 5.2.3 Interface ParentNode
      4. 5.2.4 Interface NonDocumentTypeChildNode
      5. 5.2.5 Interface ChildNode
      6. 5.2.6 Old-style collections: NodeList and HTMLCollection
         1. 5.2.6.1 Interface NodeList
         2. 5.2.6.2 Interface HTMLCollection
   3. 5.3 Mutation observers
      1. 5.3.1 Interface MutationObserver
      2. 5.3.2 Queuing a mutation record
      3. 5.3.3 Interface MutationRecord
      4. 5.3.4 Garbage collection
   4. 5.4 Interface Node
   5. 5.5 Interface Document
      1. 5.5.1 Interface DOMImplementation
   6. 5.6 Interface DocumentFragment
   7. 5.7 Interface DocumentType
   8. 5.8 Interface Element
      1. 5.8.1 Interface Attr
   9. 5.9 Interface CharacterData
   10. 5.10 Interface Text
   11. 5.11 Interface ProcessingInstruction
   12. 5.12 Interface Comment
7. 6 Ranges
   1. 6.1 Introduction to "DOM Ranges"
   2. 6.2 Interface Range
8. 7 Traversal
   1. 7.1 Interface NodeIterator
   2. 7.2 Interface TreeWalker
   3. 7.3 Interface NodeFilter
9. 8 Sets
   1. 8.1 Interface DOMTokenList
   2. 8.2 Interface DOMSettableTokenList
10. 9 Historical
    1. 9.1 DOM Events
    2. 9.2 DOM Core
    3. 9.3 DOM Ranges
    4. 9.4 DOM Traversal
11. References
12. Acknowledgments

Introduction to "DOM Events"  

Throughout the web platform events are dispatched to objects to signal an occurrence, such as network activity or user interaction. These objects implement the EventTarget interface and can therefore add event listeners to observe events:

obj.addEventListener("load", imgFetched)function imgFetched(ev) {  // great success  …}

Event listeners can be removed by utilizing the removeEventListener() method, passing the same arguments.

Events are objects too and implement the Event interface (or a derived interface). In the example above ev is the event. It is passed as argument to event listener's callback (typically a JavaScript Function as shown above). Event listeners key off the event's type attribute value ("load" in the above example). The event's target attribute value returns the object to which theevent was dispatched (obj above).

Now while typically events are dispatched by the user agent as the result of user interaction or the completion of some task, applications can dispatch events themselves, commonly known as synthetic events:

// add an appropriate event listenerobj.addEventListener("cat", function(e) { process(e.detail) })// create and dispatch the eventvar event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})obj.dispatchEvent(event)

Apart from signaling, events are sometimes also used to let an application control what happens next in an operation. For instance as part of form submission an event whose type attribute value is "submit" is dispatched. If this event's preventDefault() method is invoked, form submission will be terminated. Applications who wish to make use of this functionality through eventsdispatched by the application (synthetic events) can make use of the return value of the dispatchEvent() method:

if(obj.dispatchEvent(event)) {  // event was not canceled, time for some magic  …}

When an event is dispatched to an object that participates in a tree (e.g. an element), it can reach event listeners on that object's ancestors too. First all object's ancestor event listenerswhose capture variable is set to true are invoked, in tree order. Second, object's own event listeners are invoked. And finally, and only if event's bubbles attribute value is true, object'sancestor event listeners are invoked again, but now in reverse tree order.

Lets look at an example on how events work in a tree:

<!doctype html><html> <head>  <title>Boring example</title> </head> <body>  <p>Hello <span id=x>world</span>!</p>  <script>   function test(e) {     debug(e.target, e.currentTarget, e.eventPhase)   }   document.addEventListener("hey", test, true)   document.body.addEventListener("hey", test)   var ev = new Event("hey", {bubbles:true})   document.getElementById("x").dispatchEvent(ev)  </script> </body></html>

The debug function will be invoked twice. Each time the events's target attribute value will be the span element. The first time currentTarget attribute's value will be the document, the second time the body element. eventPhase attribute's value switches from CAPTURING_PHASE to BUBBLING_PHASE. If an event listener was registered for the span element, eventPhase attribute's value would have been AT_TARGET.