Since we geeky Web Designers have become wise to the mobile era, we might as well become familiar with the handling of touch events –and by that I refer to touch events for iOS. What is a Touch Event? Well, when a touch event(i.e. a gesture or touching the screen with your finger) is detected by the event listener, the touch event is triggered -Viola! For example, if you wanted to detect a target that triggered a touch event we would simply place an event listener on that trigger element, or you could also allow for Event Bubbling. Event Bubbling allows a parent node to handle the event for children nodes, but that is an entirely different discussion for another day.

Like our standard desktop events such as mouseover, mouseout, mousedown, mouseup, we need to detect our ontouchstart, ontouchend, ontouchmove event very similar to mouse events. Then why do we have them anyways you might be wondering? Leave a comment and let me know your thoughts.

//grab the object
var el = document.getElementById('nodetarget');

//custom function handler for event                  
function touchStart(event){
     event.preventDefault();
     var numtouch = event.touches.length;
     alert(numtouch);
};

//add event listener
el.addEventListener( 'touchstart', touchStart, false);
});

Check out the live example

ontouchstart