Create Multiple Events using Variables to Specify Event for Function in Jquery

Question

I need to conduct tests for events Touch and Mouse in Jquery, and focused on reducing the cost of performing and trying to simplify the code to stay visible, simple and fast to handle choices, follow the code:

jQuery(document).on({
  'mousedown': function() {
    alert("Mouse Click");
  },
  'touchstart': function() {
    alert("Touch Click");
  }
}, ".element");

div {
  width: 150px;
  height: 150px;
  background-color: #00bcd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="element">Clica Aqui</div>

In this example all right works but I repeat all code within the mousedown to the touchstart I find it unnecessary. I’ve seen some codes doing so:

jQuery(document).on({
  'mousedown touchstart': function(event) {
    console.log(event.type);
  }
}, ".element");

div {
  width: 150px;
  height: 150px;
  background-color: #00bcd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="element">Clica Aqui</div>

It works but if I hold too much in the Event Touch he shows the mousedown. Then I saw some codes to test that who clicks is a device with touch or not:

// Detect Mobile
var mobile = /Windows Phone|Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent.toLowerCase());

var events = {
  startClick: (mobile ? "touchstart" : "mousedown"),
  moveClick: (mobile ? "touchmove" : "mousemove"),
  stopClick: (mobile ? "touchend" : "mouseup")
};

$(document).on(events.startClick, '.element', function(event) {
  console.log(event.type);
});

div {
  width: 150px;
  height: 150px;
  background-color: #00bcd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="element">Clica Aqui</div>

This solution looks great and helps but want for multiple events with Device checking but when I do it does not perform. See the code:

// Detect Mobile
var mobile = /Windows Phone|Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent.toLowerCase());

var events = {
  startClick: (mobile ? "touchstart" : "mousedown"),
  moveClick: (mobile ? "touchmove" : "mousemove"),
  stopClick: (mobile ? "touchend" : "mouseup")
};

jQuery(document).on({
  'events.startClick': function(event) {
    alert("Clicou: " + event.type);
  },
  'events.stopClick': function(event) {
    alert("Saltou: " + event.type);
  }
}, ".element");

div {
  width: 150px;
  height: 150px;
  background-color: #00bcd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="element">Clica Aqui</div>

My problem is this, I do not want to create many functions to solve problem of not repeating the code, simply already at the beginning I can indicate the Event that I need help a lot. I use the Jshint to clean the code well and it gives attention not to use much to the functions for the sake of memory use.

Answer 1

If you do not want to write the same function several times, then create before:

function callback(e) {
    alert(e.type);
    /*[....]*/
}

$(document).on({
    click: callback,
    keydown: callback,
    touch: callback
});