# Input Events
# Handling Pointer Events
If your application requires any kind of user interaction, three-elements aims at making this super-easy by exposing common input events (pointer movement/clicks, double-clicks et al) as normal DOM events emitted by the elements themselves.
Let's have an example with a mesh that reacts on the pointer entering, leaving, or clicking on it:
<three-game autorender> <three-scene background-color="#eee"> <three-mesh scale="3" onpointerdown="this.object.rotateZ(0.4)" onpointerover="this.object.material.color.set('#fff'); this.object.scale.setScalar(4)" onpointerout="this.object.material.color.set('#666'); this.object.scale.setScalar(3)" > <three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry> <three-mesh-standard-material color="#666"></three-mesh-standard-material> </three-mesh> <three-ambient-light intensity="0.2"></three-ambient-light> <three-directional-light intensity="0.8" position="10, 10, 50" ></three-directional-light> </three-scene> </three-game>
Remember, these are just plain old DOM events – just use them like you would do with any other HTML element.
Wait, what? How does this work?
A typical approach to handling pointer events in a Three.js project is to retrieve the mouse position and then perform a raycast into the scene to see which object is hit. three-elements does this heavy lifting for you, finds the element that is home to the affected scene object, and makes it emit the corresponding DOM event. Voila!
# List of Available Events
Currently implemented are