Touch and Orientation events

Touch and Orientation Events events get attached the same way the nontouch events like click and focus. These events are useful for touch-based devices.

The touch-based events will execute only on a device that supports touch (phone, tablet, and so on), and orientation events will be supported in any device that has an accelerometer.

Using a touch Event

<!doctype html>
<html lang="en">

<head>
    <title>Touch Events</title>
    <meta charset="utf-8">
    <style>
        body {
            min-height: 600px;
            background: #ddd;
        }
    </style>
</head>

<body>
    <h1>Touch Events Demo</h1>
    <!-- JS at the bottom, because we still rock at performance -->
    <script src="js/script.js"></script>
</body>

</html>

touchstart and touchend

The touchstart event is triggered when a user touches the screen, and the touchend event is triggered with the opposite action of untouching the screen (removing whatever you touched the screen with from the screen).

In the below example a new object touchControls for creating two methods which to be executed on the touchstart and touchend events.

Example of Using a touch Event

/* Anonymous function wrapper again! */
(function() {
    var body = document.getElementsByTagName("body")[0];
    // declare an object to hold touch controls
    var touchControls = {
        pokeTheScreen: function() {
            // output a message to the body
            body.innerHTML += "you just poked me, how rude!<br>";
        },
        stopPokingTheScreen: function() {
            // output another message to the body
            body.innerHTML += "please do not do that again.<br><br>";
        }
    } // end object
    // add event listeners to the body
    body.addEventListener("touchstart", touchControls.pokeTheScreen, false);
    body.addEventListener("touchend", touchControls.stopPokingTheScreen, false);
})();

View the above example in a browser on a touch-capable device, you will see the text inserted into the body when you touch the screen and when you lift your finger off the screen.

touchmove

The touchmove event is triggered when the user touch the screen and moves their finger on the screen. It is always preceded by the touchstart event. This is used to create swipe gestures or to move objects around the screen.

Below example will output the text “moving!!” when you touch and move your finger around the screen.

Example Using a touchmove Event

/* Anonymous function wrapper again! */
(function() {
    // the same body variable, no need to redeclare it.
    var body = document.getElementsByTagName("body")[0];
    // declare an object to hold touch controls
    var touchControls = {
        /* previously defined methods here */
        showMovement: function() {
            // output a message to the body
            body.innerHTML += "moving!!<br>";
        } // end method
    } // end object
    // add event listeners to the body
    body.addEventListener("touchmove", touchControls.showMovement, false);
})();

orientationchange

orientationchange is related to touch event that only works in a device on the presence of an accelerometer. An accelerometer allows the screen on your phone or tablet to rotate when you rotate the device.

It can return how many degrees the user is turning a device in one direction or another. You can also get orientation settings for portrait, landscape, upside-down portrait, and upside-down landscape with some work.

Example of Executing a Method on orientationchange

/* Anonymous function wrapper again! */
(function() {
    // the same body variable, no need to redeclare it.
    var body = document.getElementsByTagName("body")[0];
    // declare an object to hold touch controls
    var touchControls = {
        /* previously defined methods here */
        changedOrientation: function() {
            // clear out the body content
            body.innerHTML = "";
        } // end method
    } // end object
    // add event listeners to the body
    body.addEventListener("orientationchange", touchControls.changedOrientation,
        false);
})();

The above example clears the content of the body when the orientation changes.

Support for Touch Events

The touch-based events can be used to create a native app-like experience in the browser. They are the basis for all swipe and gesture behaviors you experience on a touch device. For example, a drag-and-drop function for a nontouch device could easily be reused to create a touch/drag functionality on a touch-based device.

Putting It All Together

Below example uses entire touch event base JavaScript together.

/* Anonymous function wrapper again! */
(function() {
    // the same body variable, no need to redeclare it.
    var body = document.getElementsByTagName("body")[0];
    // declare an object to hold touch controls
    var touchControls = {
        pokeTheScreen: function() {
            // output a message to the body
            body.innerHTML += "you just poked me, how rude!<br>";
        },
        stopPokingTheScreen: function() {
            // output another message to the body
            body.innerHTML += "please do not do that again.<br><br>";
        },
        showMovement: function() {
            // output a message to the body
            body.innerHTML += "moving!!<br>";
        }, // end method
        changedOrientation: function() {
            // clear out the body content
            body.innerHTML = "";
        } // end method
    } // end object
    // add event listeners to the body
    body.addEventListener("touchstart", touchControls.pokeTheScreen, false);
    body.addEventListener("touchend", touchControls.stopPokingTheScreen, false);
    body.addEventListener("touchmove", touchControls.showMovement, false);
    body.addEventListener("orientationchange", touchControls.changedOrientation, false);
})();