为什么 input type='file' 不调度事件？答案

【问题标题】：Why input type='file' does not dispatch Event?为什么 input type='file' 不调度事件？
【发布时间】：2017-11-08 09:09:19
【问题描述】：

为什么这个简单的例子不起作用？：

<input id="image" type="file"/>
<img src='https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png' onclick='imageLoad()'></img>
<script>
  function imageLoad() {    
    let ev = new Event('click', {bubbles: true});
    image.dispatchEvent(ev); 
  }
</script>

【问题讨论】：

定义“它不起作用”。 image 未定义，你的控制台可能会告诉你这个
还要注意img 是void element，它从来没有结束标签。你永远不会写</img>。在 HTML 中，它只是 <img src="...">。在 XHTML（您可能没有使用）中，它是 <img src="..." />。
@JeremyThille：遗憾的是，image 不是未定义的，它是文件输入的自动全局变量，因为它有一个 id。 :-|
@T.J.没办法O_o
@JeremyThille：可悲的是：w3.org/TR/html5/browsers.html#named-access-on-the-window-object :-)

标签： javascript html events event-handling dom-events

【解决方案1】：

确实存在某些安全隐患，但根据您的目标，如果您将 Event 构造函数更改为 MouseEvent，它将在此示例中起作用。

...
<body>
<input id="image" type="file" />
<img id="handle" src="https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png" />
<script>
  let handle = document.getElementById('handle');
  handle.addEventListener('click', imageLoad, false);

  function imageLoad() {
    let ev = new MouseEvent('click', {bubbles: true});
    image.dispatchEvent(ev); 
  }
</script>
...

【讨论】：

这是一个很好的答案，它有效。有趣的事实：iOS 上的 Safari 无需此技巧即可调度事件，即使存在所有安全隐患。

【解决方案2】：

只是重复Peter Pajchl，对于那些在后面的人：

<!-- an ugly file input (quick, hide it away!) -->
<input
    type="file"
    id="htmlFileInputElement"
    style="position: absolute; top: -1000px; left: -1000px;"
/>


<!-- a beautiful, inviting button -->
<button onclick="
    htmlFileInputElement.dispatchEvent(
        new MouseEvent('click', { bubbles: true })
    )
">Upload File</button>

（因为此页面是用于设置文件输入样式的第一搜索结果）

【讨论】：

【解决方案3】：

首先，检查<img> 关闭标签。其次，由于浏览器的安全原理，不能通过js调度输入的点击事件。对于div，就可以了：

function imageLoad() { 
    let image = document.querySelector('#div');
    let ev = new Event('click', {bubbles: true});
    image.dispatchEvent(ev); 
  }
  
function clickDiv(){
  console.log('clicked the div');
}

<input id="image" type="file" />
<div id="div" onclick="clickDiv()">123</div>
<img src='https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png' onclick='imageLoad()' />

【讨论】：