What is the difference between change in jQuery and JavaScript?

This is not specific to jQuery Mobile but is a part of the jQuery Framework itself.

See more: https://api.jquery.com/change/

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

In regards to .change():

This method is a shortcut for .on( "change", handler )

In essence they are the same. Using .on() has more delgation options and therefore is better to use with dynamically created elements that do not exist in DOM when the page loads.

Consider the following HTML:

<div class="form-parts">
  <label for="option-1">Select First Option</label>
  <select id="option-1">
    <option></option>
    <option value="1">Opt 1<option>
    <option value="2">Opt 2<option>
    <option value="3">Opt 3<option>
  </select>
</div>

And consider the following jQuery:

$(function(){
  $("#option-1").change(function(){
    console.log("Selected: " + $(this).val());
  });
});

In this example, the DOM Loads and is aware of the <select> element, so binding the change callback is no issue. Now what if you wanted to prompt the User to make a second choice based on the <option> they selected. If you created that <select> element for this dynamically, there would be no binding to that new element. You can bind the callback when you create the element:

$("<select>", {
  id: "option-2"
})
.insertAfter($("#option-1"))
.change(function(){
  console.log("Selection 2: " + $(this).val());
});

You can also bind a callback using .on() to elements that do not yet exists.

$(function() {
  $(".form-parts").on("change", "select", function() {
    switch ($(this).attr("id")) {
      case "option-1":
        console.log("Selection 1: " + $(this).val());
        if ($(this).val() === "2") {
          var s = $("<select>", {
            id: "option-2"
          }).insertAfter(this);
          $("<label>", {
            for: "option-2"
          }).html("Second Option").insertBefore(s);
          $("<option>").appendTo(s);
          $("<option>", {
            value: "0"
          }).html("No").appendTo(s);
          $("<option>", {
            value: "1"
          }).html("Yes").appendTo(s);
        } else {
          $("#option-2").add($("#option-2").prev("label")).remove();
        }
        break;
      case "option-2":
        console.log("Selection 2: " + $(this).val());
        break;
    }
  });
})

.form-parts label {
  padding: 3px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-parts">
  <label for="option-1">Select First Option</label>
  <select id="option-1">
    <option></option>
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
  </select>
</div>

Here you can see that the change event callback is more complex as it is handling the change for all current and potential <select> elements.