jQuery和JavaScript的变化有什么区别？

Question

请问on("change")（jQuery）和.change（JavaScript）有什么区别？

如果有摘要/示例可以更好地理解，那就太好了。

Answer 1

这并非特定于jQuery Mobile，而是jQuery Framework本身的一部分。

查看更多：https://api.jquery.com/change/

change事件在其值更改时发送到元素。此事件仅限于<input>元素，<textarea>框和<select>元素。对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但是对于其他元素类型，该事件将推迟到该元素失去焦点为止。

关于.change()：

此方法是.on( "change", handler )的快捷方式

本质上它们是相同的。使用.on()具有更多的选择选项，因此最好与页面加载时DOM中不存在的动态创建的元素一起使用。

考虑以下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>

并考虑以下jQuery：

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

在此示例中，DOM加载并且知道<select>元素，因此绑定change回调没有问题。现在，如果您想提示用户根据他们选择的<option>做出第二选择，该怎么办。如果您为此动态创建了<select>元素，则不会绑定到该新元素。您可以在创建元素时绑定回调：

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

您还可以使用.on()将回调绑定到尚不存在的元素。

$(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>

在这里您可以看到change事件回调更为复杂，因为它正在处理所有当前和潜在<select>元素的更改。