javascript - 找不到 "trigger"的非 jQuery 等价物

Question

Tigran Saluev 建议 following answer手动触发选择文件的提示，但代码使用了 jQuery。他的代码如下:

var input = $(document.createElement("input"));
input.attr("type", "file");
input.trigger("click");

在我的项目中，我想要相同的效果但没有 jQuery。我以为我在这里:

var input = document.createElement("input");
input.setAttribute("type", "file");
input.dispatchEvent(new Event("click"));

但是没有任何反应。我做错了什么？

Answer 1

在您的情况下，只需一个简单的 click() 调用即可触发事件。或者如果你想使用调度事件，你想创建一个 Mouse Event并触发它。

var fi = document.querySelector("#f");

// simple call to click()
document.querySelector("button.test1").addEventListener("click", function() {
 f.click()
});

// Or with dispatch event
document.querySelector("button.test2").addEventListener("click", function() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  fi.dispatchEvent(event);
});

<input id="f" type="file" />
<button class="test1" type="button"> CLICK ME 1</button>
<button class="test2" type="button"> CLICK ME 2</button>