jQuery change 和 HTML 的 onchange 有什么区别？

Question

我有以下 HTML 代码：

<select name="test123" id="test123" onchange="testOnchange()">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option>Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<script>
$( "#test123" ).change(function() {
    console.log("change");
  });
function testOnchange() {
    console.log("onchange");
}
</script>

如果我使用 JS 为 select 设置一个值，如下所示：

$("#test123").val("Candy");

为什么testOnchange() 会触发，而jQuery change 不会？

change 和 onchange 之间到底有什么区别？

Answer 1

这是因为你在绑定change事件之前没有确保在dom中加载了<select>，检查这个fiddle

当这些脚本被包装在document 的onload 事件中时，检查这个fiddle again。

另外，如果您以编程方式设置值，则还需要以编程方式触发 change() 事件，请检查 here 和 here

$( document ).ready( function(){
    $( "#test123" ).change(function () {
        console.log("change");
    });
});

function testOnchange(){
    console.log("onchange")
}

Answer 2

为什么 testOnchange() 触发了，而 jQuery 没有改变？

这是因为onchange 是在 DOM api 中定义的事件，而.change 来自jQuery 的事件对象。

因此，尽管当您使用 jQuery 代码 $("#test123").val("Candy") 应用更改事件时，它会在 DOM 中引发更改事件，因此只会触发原生事件。

如果您也想触发jQuery 的change 事件，那么您需要按照其他答案的建议手动触发它。 $("#test123").val("Candy").change();

Answer 3

$("#test123").val("Candy") 不触发onchange 事件见，http://jsfiddle.net/j58s9ngv，http://jsfiddle.net/j58s9ngv/1

---

设置value后尝试调用.change()触发onchange事件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select name="test123" id="test123" onchange="testOnchange()">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option>Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<script>
$( "#test123" ).change(function () {
    console.log("change");
  });
function testOnchange(){
    console.log("onchange")
}
  $("#test123").val("Candy").change()
</script>

Answer 4

$("#test123").val("Candy") 不会触发 onchange 事件。我觉得两者都一样。