再遇Event对象使用场景

起因

在项目开发中遇到了这样一个需求:在上传图片过程中,之前是通过直接点击input标签的type='file'来实现选择和浏览本地文件。

但是,现在遇到的问题是,通过点击其他的按钮来触发这个节点的点击事件。开始觉得绑定一个点击的click事件,最后发现不能够自动触发上传文件的点击,然后搜索了一下,想起来了event事件对象,然后结合之前学习的,又看了一下资料,记录一下解决问题的历程。

Event对象

Event对象本身是一个构造函数,所以,既然是对象,就可以实例化:

event = new Event('click');

Event构造函数接受两个参数。第一个参数是字符串,表示事件的名称;第二个参数是一个对象,表示事件对象的配置。该参数可以有以下两个属性。

event = new Event(eventName, configObj);

其中configObj有两个配置参数

bubbles:布尔值,可选,默认为false,表示事件对象是否冒泡。
cancelable:布尔值,可选,默认为false,表示事件是否可以被取消。

当我们触发这个对象生成的事件用dispatchEvent方法

let event = new Event('click');
dom.dispatchEvent(event);

这样就可以点击其他节点,触发本节点的事件了。

const event = new Event('click');
document.querySelector('.el-upload.el-upload--text').dispatchEvent(event);

用这种方法就可以解决上述问题了。

-------------本文结束感谢您的阅读-------------

本文标题:再遇Event对象使用场景

文章作者:Water

发布时间:2017年11月03日 - 19:11

最后更新:2023年08月01日 - 06:08

原始链接:https://water.buging.cn/2017/11/03/再遇Event对象使用场景/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!