dispatchEvent模拟事件的使用场景

模拟事件

事件是为了表示网页中某个有意义的时刻。通常,事件都是由用户交互或浏览器功能触发。事实 上,可能很少有人知道可以通过JavaScript在任何时候触发任意事件,这些事件会被当成浏览器创建的事件,他们同样会有事件冒泡,因而也会触发相应的事件处理程序。

我们将非用户触发的事件称之为"模拟事件",通过调用event.isTrusted我们可以查看一个事件是否是模拟事件。isTrusted是一个表示事件是否由用户行为生成的布尔值,当事件由用户行为触发时,为 true,当事件由脚本创建或修改,或通过 EventTarget.dispatchEvent()派发时,为 false

第一个例子

任何时候,都可以使用 new Event 创建一个自定义的事件实例对象,然后通过dispatchEvent来触发这个模拟事件,通过下面这段代码我们就可以在不点击按钮的情况下触发click事件。

csharp 复制代码
let btn = document.getElementById("myBtn"); 

var event = new Event("click", { bubbles: true, cancelable: false }); // 创建 event 对象 

btn.dispatchEvent(event); // 触发事件 

进一步思考使用场景

假设有一项事件,是需要在我们提交表单之后,向某个顶层父组件通知 "子组件已经完成表单提交了!",并传递某些特定的信息上去,常规思路自然是一层一层由子组件emit上去,这种情况下,在子组件提交表单之后,自定义一个"submited"事件,然后由document去触发,同时在父组件中用 addEventListener 监听"submited",就可以避免一层层传值的窘境。

javascript 复制代码
子组件
const submited = () => { 
    document.dispatchEvent(new Event('submited')) 
}

父组件
document.addEventListener('submited', (event) => { console.log('event', event) })
  

但这样写这段代码,实际并不会生效,上面代码中,发出的submited事件在没有设置属性的情况下默认不会冒泡,而addEventListener方法在不设置第三个参数的情况下又默认在冒泡阶段监听,因此监听函数不会触发。

我们将代码稍作修改,设置事件属性为冒泡,且不可以被取消,那么即使调用Event.preventDefault()也不可以取消这个事件。

javascript 复制代码
子组件
const submited = () => { 
    document.dispatchEvent(new Event('submited', { 
        'bubbles': true, 
        'cancelable': false
    })) 
}

父组件
document.addEventListener('submited', (event) => { console.log('event', event) })
  

升级场景

例如,假设有一个购物车组件和一个订单结算组件。当购物车中的商品发生变化时,可以触发一个名为 cartUpdated 的自定义事件,订单结算组件通过监听这个事件来更新结算信息

javascript 复制代码
// 创建自定义事件
const cartUpdatedEvent = new Event('cartUpdated',{ 
        'bubbles': true, 
        'cancelable': false
    });

// 购物车组件中触发事件
document.dispatchEvent(cartUpdatedEvent);

// 订单结算组件中监听事件
document.addEventListener('cartUpdated', () => {
  // 更新结算信息的逻辑
});

再例如,为了避免click在移动端300ms的延迟,想要将页面所有click事件全部替换为tap事件

csharp 复制代码
// 监听所有的 click 事件
    document.addEventListener('click', function(event) {
      // 创建一个新的自定义事件 tap
      const tapEvent = new Event('tap', { 
        'bubbles': true, 
        'cancelable': false
    });

      // 复制原始 click 事件的相关属性到 tap 事件
      tapEvent.clientX = event.clientX;
      tapEvent.clientY = event.clientY;
      tapEvent.screenX = event.screenX;
      tapEvent.screenY = event.screenY;

      // 触发 tap 事件
      event.target.dispatchEvent(tapEvent);
    });

    // 监听 tap 事件
    document.addEventListener('tap', function(event) {
      console.log('tap 事件被触发',event);
    }
相关推荐
青皮桔28 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺28 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear31 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月34 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201838 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘39 分钟前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp