How to use mobile touch events with pure javascript?

Question

What is the syntax for mobile touch events in javascript? I tried:

window.document.body.ontouchstart = function() { alert(); }

and

window.document.body.touchstart = function() { alert(); }

It doesn't give any error. And nothing happens on touching the webpage. It seems like addEventListener is the way to go. But why doesn't window.document.body.ontouchstart directly work?

Answer 1

var theElement = document.getElementById("theElement");

theElement.addEventListener("touchstart", handlerFunction, false);

function handlerFunction(event) {
alert();
}

Answer 2

Try this code:

function foo(event) {
  alert();
}

var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", foo(), false);

//or 

window.document.body.addEventListener("touchstart", foo(), false);

• Event listner documentation
• example jsfiddle here