Handling Document Events

Focus Focus Focus focus, blur

CSS Animation CSS Animation CSS Animation animationstart, animationcancel, animationend, animationiteration

CSS Transition CSS Transition CSS Transition transitionstart, transitioncancel, transitionend, transitionrun

Form Form Form reset, submit, invalid

Text Composition Text Composition Text Composition compositionstart, compositionupdate, compositionend

The 'compositionstart' event is triggered when the user starts typing on a Chinese virtual keyboard.
RESETRUNFULL

<!DOCTYPE html><html><head><meta charset="UTF-8"/></head><body>
   <span></span><br/><br/>
   <input type="text">
   <script>
     document.querySelector("input").addEventListener("
       compositionstart",function(event){
          document.querySelector("span").innerHTML
                ="STARTED";
     });
   </script></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"/></head><body>
   <span></span><br/><br/>
   <input type="text">
   <script>
     document.querySelector("input").addEventListener("
       compositionstart",function(event){
          document.querySelector("span").innerHTML
                ="STARTED";
     });
   </script></body></html>

Drag & Drop Drag & Drop Drag & Drop drag, dragend, dragenter, dragstart, dragleave, dragover, drop

RESETRUNFULL

<!DOCTYPE html><html><head>
   <title>Event Binding</title>
   <style>
      #drop_zone {
         border: 5px solid blue;
         width:
  200px;
         height: 100px;
      }
   </style>
   <script>
      function dropHandler(ev) {
         console.log('File(s) dropped');
         ev.preventDefault();
         if (ev.dataTransfer.items) {
           for (var i=0; i<ev.dataTransfer.items.length; i++) {
               if (ev.dataTransfer.items[i].kind === 'file') {
                  var file = ev.dataTransfer.items[i].getAsFile();
                  console.log('... file['+i+'].name = '+file.name);
               }
            }
         } else {
            for (var i=0; i<ev.dataTransfer.files.length; i++) {
            console.log('... file['+i+'].name = '
                                          +ev.dataTransfer.files[i].name);
            }
         }
      }
      function dragOverHandler(ev) {
         console.log('File(s) in drop zone');
          ev.preventDefault();
      }
   </script></head><body>
   <div id="drop_zone" ondrop="dropHandler(event);"
            ondragover="dragOverHandler(event);">
      <p>Drag one or more files to this Drop Zone ...</p>
   </div></body></html>

<!DOCTYPE html><html><head>
   <title>Event Binding</title>
   <style>
      #drop_zone {
         border: 5px solid blue;
         width:
  200px;
         height: 100px;
      }
   </style>
   <script>
      function dropHandler(ev) {
         console.log('File(s) dropped');
         ev.preventDefault();
         if (ev.dataTransfer.items) {
           for (var i=0; i<ev.dataTransfer.items.length; i++) {
               if (ev.dataTransfer.items[i].kind === 'file') {
                  var file = ev.dataTransfer.items[i].getAsFile();
                  console.log('... file['+i+'].name = '+file.name);
               }
            }
         } else {
            for (var i=0; i<ev.dataTransfer.files.length; i++) {
            console.log('... file['+i+'].name = '
                                          +ev.dataTransfer.files[i].name);
            }
         }
      }
      function dragOverHandler(ev) {
         console.log('File(s) in drop zone');
          ev.preventDefault();
      }
   </script></head><body>
   <div id="drop_zone" ondrop="dropHandler(event);"
            ondragover="dragOverHandler(event);">
      <p>Drag one or more files to this Drop Zone ...</p>
   </div></body></html>

Value Change Value Change Value Change broadcast, CheckboxStateChange, hashchange, input, RadioStateChange, readystatechange, ValueChange

Menu Menu Menu DOMMenuItemActive, DOMMenuItemInactive

Popup Popup Popup popuphidden, popuphiding, popupshowing, popupshown

Tab Tab Tab visibilitychange

Frame Frame Frame mozbrowserclose, mozbrowsercontextmenu, mozbrowsererror, mozbrowsericonchange, mozbrowserlocationchange, mozbrowserloadend, mozbrowserloadstart, mozbrowseropenwindow, mozbrowsersecuritychange, mozbrowsershowmodalprompt, mozbrowsertitlechange

DOM Mutation DOM Mutation DOM Mutation DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, DOMContentLoaded, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

MENU

Handling Document Events