javascript jQuery change 和 onchange of HTML 有什么区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34150956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:18:58  来源:igfitidea点击:

What is the difference between jQuery change and onchange of HTML?

javascriptjqueryhtmlonchange

提问by dieuvn3b

I have the following HTML code :

我有以下 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>

If I use JS to set a value for the select like this:

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

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

why does testOnchange()trigger, but jQuery changedoesn't?

为什么会testOnchange()触发,而 jQuerychange不会?

What exactly is the difference between changeand onchange?

change和之间究竟有什么区别onchange

采纳答案by gurvinder372

It is because you didn't ensured that <select>is loaded in dom before binding the changeevent, check this fiddle

这是因为您没有确保<select>在绑定change事件之前已加载到 dom 中,请检查此小提琴

and check this fiddle againwhen these scripts were wrapped inside onloadevent of the document.

并检查这再次拨弄时,这些脚本是包裹在里面onload的情况document

Also, if you are setting the value programmatically, you need to trigger the change() event programmatically as well, check hereand here

此外,如果您以编程方式设置值,则还需要以编程方式触发 change() 事件,请检查此处此处

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

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

回答by Jai

why does testOnchange() trigger, but jQuery change not?

为什么 testOnchange() 会触发,而 jQuery 不会改变?

This is because onchangeis an event defined in DOM api but .changeis from jQuery's event object.

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

So, although when you apply a change event with jQuery code $("#test123").val("Candy")it causes a change event in DOM so the native one is fired only.

因此,尽管当您使用 jQuery 代码应用更改事件时,$("#test123").val("Candy")它会导致 DOM 中的更改事件,因此只会触发本机事件。

In case if you want to trigger the jQuery's changeevent too, then you need to trigger it manually as the other answer suggested. $("#test123").val("Candy").change();

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

回答by users123212321i

$("#test123").val("Candy")does not trigger onchange event. I think both same.

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

回答by guest271314

$("#test123").val("Candy")does not trigger onchangeevent see, http://jsfiddle.net/j58s9ngv, http://jsfiddle.net/j58s9ngv/1

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



Try calling .change()after setting valueto trigger onchangeevent

.change()设置value触发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>