HTML | DOM TouchEvent Last Updated : 13 Jun, 2022 Comments Improve Suggest changes Like Article Like Report When a user touches a touch-based device the resulted events are handled by TouchEvent Object. The touch events consist of three types of interfaces i.e. Touch, TouchEvent and TouchList. The single contact point events on a touch-sensitive device are handled by the Touch interface. The events which have a list of contact points with a touch surface, one touch point per contact are handled by TouchList interface. When an event is sent which have the state of contacts with touch-sensitive surface changes, those events are handled by TouchEvent interface. Event Type: ontouchstart:When a finger is placed on a touch screen, ontouchstart event occurs. Syntax:<p ontouchstart="TouchFunction()">Touch me</p>Example-1: html <!DOCTYPE html> <html> <head> <title>DOM touchstart Event</title> </head> <body> <p ontouchstart="TouchFunction()">Touch me!</p> <p id="p1"></p> <script> function TouchFunction() { document.getElementById( "p1").innerHTML = "Hello World"; } </script> </body> </html> Output:Before touching the screen: After touching the screen: ontouchmove:When user moves finger over touch screen, ontouchmove event occurs. Syntax:<p ontouchmove="TouchFunction()">Touch me</p>Example-2: html <!DOCTYPE html> <html> <head> <title>DOM touchmove Event</title> </head> <body> <p ontouchmove="TouchFunction()">Touch me!</p> <p id="p1"></p> <script> function TouchFunction() { var x = event.touches[0].clientX; var y = event.touches[0].clientY; document.getElementById("p1").innerHTML = "X & Y coordinate of current touch point is:" + x + ", " + y; } </script> </body> </html> Output:Before moving the fingers over screen: After moving the fingers over screen: ontouchend:When user removes the finger from an event over touch screen, ontouchend event occurs. Syntax:<p ontouchend="TouchFunction()">Touch me</p>Example-3: html <!DOCTYPE html> <html> <head> <title>DOM touchstart Event</title> </head> <body> <p ontouchend="TouchFunction()">Touch me!</p> <p id="p1"></p> <script> function TouchFunction() { document.getElementById( "p1").innerHTML = "Hello World"; } </script> </body> </html> Output:Before removing the fingers from screen: After removing the fingers from screen: Supported Browsers: Google Chrome 22 and aboveMozilla Firefox 52 and aboveEdge 79 and aboveOpera 15 and above Comment More infoAdvertise with us C chaitanyashah707 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM Column Object The Column Object in HTML DOM is used to represent the HTML <col> element. This tag is used to set or get the properties of <col> element. It can be accessed by using getElementById() method.Syntax: document.getElementById("Col_ID"); This Col_ID is assigned to HTML < col > element. 2 min read HTML | DOM Input Hidden Object The Input Hidden object in HTML DOM represents the <input> element with type = “hidden†attribute. The element can be accessed by using getElementById() method.Syntax: document.getElementById("id"); where id is assigned to the <input> tag.Property Values: defaultvalue: It is used to set 2 min read HTML | DOM Input Time Object The Input Time object in HTML DOM represents an <input> element with type = "time" attribute. The time attribute can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the referen 3 min read HTML DOM Geolocation coordinates Property The DOM Geolocation coordinates Property in HTML is used to return the position and altitude of the device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Property Values: ValuesDescriptioncoordinates.latitude 2 min read HTML DOM Textarea disabled Property The DOM Textarea disabled Property is used to set or return whether the textarea element would be disabled or not. A disabled text area is un-clickable and unusable. It is a boolean attribute and is used to reflect the HTML Disabled attribute. Syntax: It is used to return the disabled property.texta 2 min read HTML | DOM Input Week Object The Input Week object in HTML DOM represents an <input> element with type = "week" attribute. The element can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the reference of d 3 min read HTML | DOM Style borderImageSource Property The DOM Style borderImageSource Property is used to set or return the image to be used instead of the styles given by the border-style property. Syntax: To get the borderImageSource propertyobject.style.borderImageSourceTo set the borderImageSource propertyobject.style.borderImageSource = "none | im 3 min read HTML | DOM Progress max Property The DOM Progress max Property is used to set or return the value of the max attribute of an <progress> element. The max attribute represents the total work is to be done for completing a task. Syntax: It is used to return the progress max property. progressObject.maxIt is used to set the progr 2 min read HTML | DOM Textarea autofocus Property The DOM Textarea autofocus Property is used to set or return whether the element should get focus when the page loads. This property is used to reflect the HTML autofocus attribute. Syntax: It is used to Return the autofocus property. textareaObject.autofocusIt is used to Set the autofocus property. 2 min read HTML | DOM ClipboardEvent The ClipboardEvent refers to all the events which occur when the clipboard is modified. All the properties and methods are inherited from the ‘Event Object’. There are 3 main ClipboardEvents:oncopyoncutonpasteReturn Value: It returns an object containing the data affected by the clipboard operation. 1 min read Like