利用原生JS做组件通信---自定义事件

Garlen20o

已于 2022-08-29 23:51:40 修改

阅读量463

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-08-29 23:49:48 首次发布

本文链接：https://blog.csdn.net/weixin_45443843/article/details/126594889

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近遇到个场景，研究过后发现可以用原生js实现组件通信
如下例子：

<body>
  <button class="mybtn">click me</button>
</body>
<script>
  let obtn = document.querySelector('.mybtn')

  
  //为btn元素注册事件（相当于组件接收数据的一方）
  obtn.addEventListener('btn-eve', (e) => { console.log(e.detail.msg) })
  
  //向btn派发一个事件，并以合适的顺序同步调用目标元素相关的事件处理函数，dispatchEvent就相当于主动触发注册的事件
   //dispatchEvent()是 create-init-dispatch 过程的最后一步
   //（相当于组件通信数据源）
  obtn.dispatchEvent(new CustomEvent('btn-eve', { detail: { msg: 'you have clicked me' } }))
</script>

构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。

在第二个参数（对象）中，我们可以为我们想要与事件一起传递的任何自定义信息添加一个附加的属性 detail。

总结：dispatchEvent+ CustomEvent（）可以完成数据派发，可以利用在组件通信。目前还没发现这种方法的问题，欢迎各位指正交流。

另外注意：一个事件是在另一个事件中发起的。例如使用 dispatchEvent。这类事件将会被立即处理，即在新的事件处理程序被调用之后，恢复到当前的事件处理程序。

<button id="menu">Menu (click me)</button>

<script>
  menu.onclick = function() {
    alert(1);

    menu.dispatchEvent(new CustomEvent("menu-open", {
      bubbles: true
    }));

    alert(2);
  };

  // 在 1 和 2 之间触发
  document.addEventListener('menu-open', () => alert('nested'));
</script>