JavaScript 自定义监听事件 Event

2018-05-08

这个需求的由来是在做点击或拖拽获取文件信息时，获取文件这一步操作不希望每次都写，而是封装起来，同时希望可以自定义一个监听事件，以后我只需要监听 Element 的该监听事件就可以拿到需要上传的文件。

首先来看如何定义一个监听事件

语法

1	event = new Event(typeArg, eventInit);

参数

typeArg 是DOMString 类型，表示所创建事件的名称
eventInit 可选是 EventInit 类型的字典，接受以下字段:
- “bubbles”，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
- “cancelable”，可选，Boolean类型，默认值为 false，表示该事件能否被取消。
- “composed”，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。

以前也有 Document.createEvent() 创建方法，但是已经被废弃。

使用

// 定义事件类型
var evt = new Event('upload', {"bubbles":true, "cancelable":true})
// 在元素上监听事件
var obj = document.getElementById('file');
obj.addEventListener('upload', function(e){
    console.log('upload 事件触发了');
}, false);

obj.dispatchEvent(evt)  // 调用监听事件
// upload 事件触发了

以上模拟了事件创建和触发的过程。

在获取文件信息的例子中完成使用详见自定义监听事件