Editing DOM event (section)

=== DOM Level 2 ===
The W3C designed a more flexible event handling model in DOM Level 2.<ref name="dom2-events"/>

{| class="wikitable"
! Name
! Description
! Argument type
! Argument name
|-
| rowspan=3 | addEventListener
| rowspan=3 | Allows the registration of event listeners on the event target.
| DOMString
| type
|-
| EventListener
| listener
|-
| boolean
| useCapture
|-
| rowspan=3 | removeEventListener
| rowspan=3 | Allows the removal of event listeners from the event target.
| DOMString
| type
|-
| EventListener
| listener
|-
| boolean
| useCapture
|-
| dispatchEvent
| Allows sending the event to the subscribed event listeners.
| Event
| evt
|-
|}

Some useful things to know :
* To prevent an event from bubbling, developers must call the <code>stopPropagation()</code> method of the event object.
* To prevent the default action of the event to be called, developers must call the <code>preventDefault()</code> method of the event object.

The main difference from the traditional model is that multiple event handlers can be registered for the same event. The <code>useCapture</code> option can also be used to specify that the handler should be called in the capture phase instead of the bubbling phase. This model is supported by [[Mozilla]], [[Opera browser|Opera]], [[Safari (web browser)|Safari]], [[Google Chrome|Chrome]] and [[Konqueror]].

==== A rewrite of the example used in the traditional model ====
<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>DOM Level 2</title>
</head>

<body>
     <h1>DOM Level 2</h1>
     
     <p>Hey Joe!</p>
     
     
     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
          
          // Add an event handler
          document.addEventListener( "click", heyJoe, true );  // capture phase
          
          // Add another event handler
          window.addEventListener( "load", heyJoe, false );  // bubbling phase
          
          // Remove the event handler just added
          window.removeEventListener( "load", heyJoe, false );
     </script>

</body>
</html>
</syntaxhighlight>