jQuery 和 JavaScript 的变化有啥区别？

Posted 2023-05-08

【中文标题】jQuery 和 JavaScript 的变化有啥区别？

【英文标题】：What is the difference between change in jQuery and JavaScript?jQuery 和 JavaScript 的变化有什么区别？

【发布时间】：2020-04-17 22:50:42

【问题描述】：

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

如果有sn-ps/examples更好理解就好了。

【问题讨论】：

在功能上它们是相同的。使用 .on 允许您使用事件委托和重载之一。

【参考方案1】：

这不是特定于 jQuery Mobile 的，而是 jQuery 框架本身的一部分。

查看更多：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> 元素的更改。

【讨论】：

非常感谢您的详细解释，我现在有了更好的理解！ :)