JS CustomEvent自定义事件传参小技巧

不裁_caiii
3,246 阅读4分钟

在 JavaScript 中，自定义事件是一种非常有用的功能，它使得我们能够创建和使用特定类型的事件以及附带的参数。而使用 CustomEvent 类，我们可以在事件上下文中传递额外的信息，这可以让我们更好地组织代码并解耦。

如何使用CustomEvent类来自定义事件并传递数据：

  1. 了解CustomEvent类
  2. 创建CustomEvent事件
  3. Dispatching发布事件
  4. 监听事件
  5. 传递数据
  6. 小技巧

了解CustomEvent类

CustomEvent类是JavaScript提供的一个API，它允许开发者自定义事件，并为这些事件指定名称、数据等相关信息。通常，CustomEvent与addEventListener()方法结合使用。

CustomEvent类的构造函数参数如下：

new CustomEvent(type, options);

其中，type参数表示要创建的事件类型，options参数是一个配置对象，它主要包括以下属性：

  • bubbles：布尔值，表示事件是否应该冒泡，默认为 false。
  • cancelable：布尔值，表示事件是否可以取消默认行为，默认为 false。
  • detail：任意类型的数据，可以在触发事件时与其一起传递。

现在，让我们看一下如何使用CustomEvent类来创建、分派（dispatch）和监听事件。

创建CustomEvent事件

首先，我们需要创建一个CustomEvent实例。我们可以使用以下代码创建一个名为"myEvent"的自定义事件：

const myEvent = new CustomEvent("myEvent");

这将创建一个不带参数和选项的自定义事件。如果我们需要为事件添加更多的信息，如数据，则可以使用options参数。

const myEvent = new CustomEvent("myEvent", { 
  detail: {
    name: "John",
    age: 30
  }
});

这里，我们创建了一个名为"myEvent"的自定义事件，并在options对象中添加了两个属性：name和age。这些数据会在事件被触发时与其一起传递。

Dispatching发布事件

要触发自定义事件，我们使用dispatchEvent()方法。以下代码演示了如何触发上面创建的"myEvent"事件：

document.dispatchEvent(myEvent);

dispatchEvent() 方法将触发该事件，并将其传递给所有监听它的元素或文档（如果没有特定的元素）。我们可以结合addEventListener()方法使用来监听自定义事件。

监听事件

要侦听事件，我们使用addEventListener()方法。以下代码演示了如何使用addEventListener()方法监听上面创建的"myEvent"事件：

document.addEventListener('myEvent', function(e){
  console.log(e); //根据event.detail下面的参数进行读取数据
})

这里，我们告诉JavaScript在"myEvent"事件发生时运行一个函数。由于"myEvent"是我们自己创建的事件类型，所以我们需要指定事件名称并提供一个函数，用于在事件触发时运行。该函数有一个参数e，它表示事件对象。我们可以使用这个对象访问在事件中传递的数据。

传递数据

在自定义事件中添加数据是非常常见的。当您需要将一些特定的信息与事件一起传递时，这可以很方便。以下是如何在CustomEvent实例中添加数据：

const myEvent = new CustomEvent("myEvent", { 
  detail: {
    name: "John",
    age: 30
  }
});

上面的代码会在事件的detail属性中添加了名为"name"和"age"的数据。

接下来，我们来看看如何在监听事件时访问和使用这些数据：

document.addEventListener('myEvent', function(e){
  console.log(e.detail.name); // 输出: John
  console.log(e.detail.age); // 输出: 30
})

这里，我们使用事件对象e中的detail属性来访问传递的数据。通过指定我们想要的data值，我们能够轻松地将任何所需的附加信息传递给事件。

小技巧

以下是一些小技巧，可以帮助您更好地管理CustomEvent事件：

在具体元素上分派事件

我们可以在特定元素上分派事件，如下所示：

const elem = document.getElementById('myElem');
elem.dispatchEvent(myEvent);

这将在具有ID“myElem”的元素上触发名为“myEvent”的CustomEvent事件。这个元素可以是任何DOM对象，不一定要是document对象。

按需添加数据

在CustomEvent实例中添加数据是一个很好的技巧，但并不总是必要的。如果我们没有需要传递的数据，那么可以省略detail属性，如下所示：

const myEvent = new CustomEvent("myEvent");

使用object替换detail对象

在上面的示例中，我们使用了一个包含多个键/值对的对象来传递数据。然而，在某些情况下，我们只需要一个简单的值（例如字符串）就足够了。在这种情况下，我们可以直接使用一个普通的JavaScript对象来代替detail对象：

const myEvent = new CustomEvent("myEvent", { 
  detail: "Hello World!"
});

document.addEventListener('myEvent', function(e){
  console.log(e.detail); // 输出: Hello World!
})

和jQuery一起使用

如果您正在编写具有jQuery依赖性的代码，则可以使用jQuery内置的trigger()方法来触发自定义事件：

$(document).trigger("myEvent");

这和直接使用dispatchEvent()方法是等效的。

avatar
文章
阅读
粉丝