如何通过JQuery触发JS原生甚至addEventListener(“change”，函数）

How to trigger JS native even addEventListener("change",function) by JQuery

本文关键字：change 函数 addEventListener JQuery 何通过 触发 JS 原生      更新时间：2023-09-26

这不是代码中如何触发jQuery更改事件的重复，因为这涉及jQuery与jQuery事件侦听器的交互，而这个问题讨论了jQuery与本机事件侦听器的互动

我使用addEventListener为输入绑定更改事件，但$（'#input'）.val（'bbb'）.change（）无法触发警报，如何通过JQuery触发addEventListener（"更改"，函数）函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>code</title>
</head>
<body>
    <script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
    <input id="input" type="text" value="input" />
    <script type="text/javascript">
        document.getElementById("input").addEventListener("change", function() {
        alert(this.value);
    });
    </script>
    <input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" />
</body>
</html>

您不能使用jQuery的.trigger('change')触发本机事件。

您需要停止本地事件并将其发送：

const evt = new Event("HTMLEvents");

然后开火：

const el = document.getElementById("input");
el.dispatchEvent(evt);

已弃用：

您需要创建一个本地事件并将其发送：

var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
//            ^         ^     ^
//            |         |     cancelable
//            |         bubbles
//            type

然后开火：

var el = document.getElementById("input");
el.dispatchEvent(evt);

使用jquery绑定更改事件。

$("#input").change(function() {
  alert(this.value);
});

工作片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>code</title>
</head>
<body>
    <script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
    <input id="input" type="text" value="input" />
    <script type="text/javascript">
      $( "#input" ).change(function() {
        alert(this.value);
      });
    </script>
    <input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" />
</body>
</html>

相关文章：