likes
comments
collection
share

挖到宝了！快来看看new Evenet中的惊喜功能

作者站长头像
站长
· 阅读数 17

new Event简介

对于前端同学来说，new Event 可能是个比较陌生的概念，因为他的使用率很低！但其实，它非常大的强大好用！我们先看看官方api的介绍：

创建和触发事件

Event() 构造函数，创建一个新的事件对象 Event。

语法

event = new Event(typeArg, eventInit);

参数：

挖到宝了！快来看看new Evenet中的惊喜功能

示例

// 创建一个支持冒泡且不能被取消的 look 事件

var ev = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(ev);

// 事件可以在任何元素触发，不仅仅是 document
myDiv.dispatchEvent(ev);

官方的介绍确实不多，很难让人眼前一亮，但仔细阅读，你会发现他最大的用途：

new Event 可以通过创建和触发自定义事件，使我们在程序中实现更加灵活和松耦合的模块间通信。

使用场景

基于它的能力，我们能得出它的使用场景

  • 模块间通信：当一个模块的状态改变，需要通知其他模块时，可以使用自定义事件进行通信。
  • 自定义行为：在特定条件下触发特定行为，而不是依赖于预定义的 DOM 事件。
  • 增强现有组件：为现有的组件添加新功能，而不需要修改组件的内部实现。

最佳实践

基础自定义事件

下面是一个简单的示例，演示如何创建、监听和触发自定义事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>new Event学习</title>
</head>
<body>

<button id="myButton">点击我</button>

<script>
    // 1. 创建自定义事件
    let myEvent = new Event('myCustomEvent');

    // 2. 获取按钮元素
    let button = document.getElementById('myButton');

    // 3. 监听自定义事件
    button.addEventListener('myCustomEvent', function (e) {
        console.log('啊，我是按钮，我被点击了!');
    });

    // 4. 点击按钮时触发自定义事件
    button.addEventListener('click', function () {
        button.dispatchEvent(myEvent);
    });
</script>

</body>
</html>

在上面的例子中，当我们点击按钮时，会触发自定义事件 myCustomEvent，并在控制台输出消息，是不是非常好用！

可传递数据的自定义事件

有时我们可能需要传达数据，我们可以同样可以使用 CustomEvent 来实现这一点。

CustomEvent接口继承其父接口 Event 的属性，用法是一致的，但更强大

<template>
  <div>
    <button @click="triggerEvent">Click me</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myEvent = new CustomEvent('myCustomEvent', {
      detail: { message: '这是加密数据!' }
    });

    const triggerEvent = () => {
      window.dispatchEvent(myEvent);
    };

    onMounted(() => {
      window.addEventListener('myCustomEvent', (e) => {
        console.log('自定义数据被触发!');
        console.log('这是数据内容:', e.detail);
      });
    });

    return {
      triggerEvent
    };
  }
};
</script>

在不同组件之间，我们也完全可以借助它实现数据交互

<template>
  <div>
    我是A组件
    <button @click="triggerEvent">点击我</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myEvent = new CustomEvent('myCustomEvent', {
      detail: { message: '这是加密数据!' }
    });

    const triggerEvent = () => {
      window.dispatchEvent(myEvent);
    };

    return {
      triggerEvent
    };
  }
};
</script>

<template>
  <div>
    我是B组件
  </div>
</template>

<script setup>
onMounted(() => {
  window.addEventListener('myCustomEvent', (e) => {
    console.log('我接受到A组件的数据内容了！！');
    console.log('这是数据内容:', e.detail);
  });
});
</script>

可以看出来，它非常的好用！

转载自:https://juejin.cn/post/7393312386349219874
评论
请登录