Question

我看到一种奇怪的行为，当我使用addEventListener时，change事件处理程序不会在display: none;的select上被触发。另一方面，当我使用jQuery时，它确实会触发。允许jQuery执行此操作的技巧是什么？如何使其在纯JavaScript中运行？

以下是显示示例的代码。

// This doesn't work
document.getElementById("notDisplayedSelect").addEventListener("change", function(e) {
  $("#output").text("When select is hidden events still fire: new value = " + $(this).val());
});

/*
// This works
$("#notDisplayedSelect").change(function (e) {
    $("#output").text("When select is hidden events still fire: new value = "+ $( this ).val());
}); 
*/

$("#setValue").click(function() {
  $("#notDisplayedSelect").val("3").trigger("change");
});

#notDisplayedSelect {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="notDisplayedSelect">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<span id="output">I show selected value</span>
<button id="setValue">Select third option in the hidden select</button>

Answer 1

来自jQuery trigger() docs

任何事件处理程序附加.on（）或其快捷方法之一 在相应事件发生时触发。

当你这样做时

 $("#notDisplayedSelect").val("3").trigger("change");

只会触发与on()或change()关联的处理程序。

显然，这不包括附加本机

的处理程序

addEventListener("change", function (e) {...});

如果要触发本机javascript附加的处理程序，可以执行

var event = new CustomEvent("change");
document.getElementById("notDisplayedSelect").dispatchEvent(event);

<强>更新 IE中的上述解决方法

var event = document.createEvent("HTMLEvents");
event.initEvent("change", true, true);
document.getElementById("notDisplayedSelect").dispatchEvent(event);

DEMO

请参阅How to trigger event in JavaScript?

Answer 2

当您使用jQuery添加处理程序时，除了将其添加为浏览器事件侦听器之外，jQuery还会在其内部内存中保留有关此处理程序的信息。然后当你调用trigger("change")时，它只是调用这些处理程序，而不是通过浏览器。

在浏览器中，更改不可见元素没有任何意义，因为change事件与用户交互相关联。

更改事件触发jquery处理程序但不触发javascript处理程序

2 个答案: