dispatchEvent自定义事件

于2023-04-25 10:42:10发布

dispatchEvent是作为高级浏览器(如chrome、Firfox等)的事件触发器来使用的，那么什么是事件触发器？就是触发事件的东西。可能有人觉得有点莫名其妙，触发事件不是在交互中被触发的吗？的确，通常情况下，事件的触发都是由用户的行为如点击、刷新等操作实现，但是，其实有的情况下，事件的触发必须又程序来实现，比如ajax框架的一些自定义事件。正如事件的绑定一样，对于浏览器而言，绑定事件分为高级浏览器和IE浏览器两派，事件触发器也是分为高级浏览器和IE两派，而dispatchEvent正是用于高级浏览器的事件触发。下面看我整理的一个触发事件的例子：

// document上绑定自定义事件dlink  
document.addEventListener('dlink', function (e) {
alert(e.name + '拿起了' + e.goods)
})

// 创建event的对象实例。  
var event = document.createEvent('HTMLEvents')

// 3个参数：事件类型，是否冒泡，是否阻止浏览器的默认行为  
event.initEvent('dlink', true, true)

/*属性，随便自己定义*/
event.name = '大毛'
event.goods = '手机'

// 触发自定义事件oneating  
document.dispatchEvent(event)

dispatchEvent大概就是这三步，上面的例子结果是：在页面载入的时候，会弹出提示框，也就是触发了oneating这个自定义事件。

例子（点击a标签唤起file事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:;" id="upload">上传</a>
    <input type="file" id="file" multiple hidden>
    <script>
        var file = document.getElementById('file');
        document.getElementById('upload').onclick = function () {
            file.dispatchEvent(new MouseEvent("click"));
        }
    </script>
</body>
</html>