MENU


Handling Input Events

Keyboard Keyboard Keyboard keydown, keypress, keyup(see the example in 9.6.2)


RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
    <script>
        document.addEventListener('keydown',()=>{
            if (event.key=="Escape")
                alert("let's escape here");
        });
    </script></body></html>

Mouse Mouse Mouse auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, pointerlockchange, pointerlockerror, select, wheel

(The 'contextmenu' event is typically triggered by clicking the right mouse button, or by pressing the context menu key.)


RESETRUNFULL
<!DOCTYPE><html><head>
   <script>
      function showMouseP(event){
         document.getElementsByTagName("p")[0].innerHTML=
          "mouse at("+event.clientX+","+event.clientY+")\n";
      }
   </script></head><body onscroll="alert(document.body.scrollTop)"
          onkeydown="alert(event.keyCode)"
          onmousemove="showMouseP(event)"
          onbeforeunload="alert('Sad to see you leave!')">
   <button onclick="scrollBy(0,300)">Scroll down</button>
   <p></p>
   <pre>asidedasdaddressadaddressaddadatadasdasdaasd
               ……
   </pre></body></html>
We can't set an event handler for the :hover pseudo-selector directly. A possible workaround is to define an event handler for the mouseenter event and another event handler for the mouseleave event. Alternatively, we can also toggle associated classes and CSS variables.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
    <span>Come to enlarge me!</span>
    <script>
       var s = document.querySelector("span");
       s.onmouseenter = function(){
          this.style.fontSize="100px";
       }
       s.onmouseleave = function(){
          this.style.fontSize="20px";
       }
    </script></body></html>

WebVR WebVR WebVR vrdisplayactivate, vtdisplayblur, vrdisplayconnect, vrdisplaydeactivate, vrdisplaydisconnect, vrdisplayfocus, vrdisplaypresentchangeTouchTouch Touch touchcancel, touchend, touchmove, touchstartPointerPointer Pointer pointerover, pointerenter, pointerdown, pointermove, pointerup, pointercancel, pointerout, pointerleave, gotpointercapture, lostpointercapture