触发事件.md

添加事件监听器

在文件上传的业务中，我们不免会遇到由于原生的文件上传按钮太丑导致需要自定位上传按钮的情形。

在该需求中，我们可以通过一个绘制好的按钮或其他标签的点击事件来实现，通过监听该标签的点击事件，动态的调用文件上传按钮的点击事件。

HTML

<form class="form-inline my-2 my-lg-0">
          <button id="header_select_file" class="form-control form-control-file mr-sm-2">选择文件...</button>
          <input id="header_file" type="file" class="form-control form-control-file mr-sm-2" style="display: none"> <!-- 隐藏真实的文件上传按钮 -->
          <button id="header_file_upload" class="btn btn-outline-success my-2 my-sm-0">上传文件</button>
        </form>

JS

// 动态将按钮的点击事件替换为文件上传框的点击事件
document.querySelector('#header_select_file').addEventListener('click',
      function () {
        document.querySelector('#header_file').click();
      });