How to trigger JS native even addEventListener("change",function) by JQuery
<p><em>This is not a duplicate of <a href="https://stackoverflow.com/questions/4247264/how-to-trigger-jquery-change-event-in-code">How to trigger jQuery change event in code</a>, since that deals with the interaction of jQuery with <strong>jQuery</strong> event listeners, while this question discusses the interaction of jQuery with <strong>native</strong> event listeners.</em></p>

<p>I use  <strong>addEventListener</strong> to bind a change event for an input, but  <strong>$('#input').val('bbbb').change();</strong> can't  trigger the alert, <strong>how to trigger addEventListener("change",function)  function  by JQuery</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;code&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;

    &lt;input id="input" type="text" value="input" /&gt;
    &lt;script type="text/javascript"&gt;
        document.getElementById("input").addEventListener("change", function() {
        alert(this.value);
    });
    &lt;/script&gt;

    &lt;input type="button" value="change input" onclick="  $('#input').val('bbbb').change();" /&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>