---
custom_edit_url: null
---

```ts
class Component
```
<p>A class used to manage events in a component</p>

<div className="container">
  <div className="row mb-2"><div className="col col--6"><strong>Properties</strong></div><div className="col col--6"><strong>Methods</strong></div></div>
  <div className="row"><div className="col col--6"><a href="#VERSION">VERSION</a><span className="bulma-tag is-info ml-2">static</span></div><div className="col col--6"><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div></div>
</div>

## Properties
### VERSION {#VERSION}

<div className="bulma-tags">
  <span className="bulma-tag is-info">static</span>
</div>

<p>Version info string</p>

**Type**: string

Component.VERSION;  // ex) 3.0.0

## Methods

### trigger {#trigger}

<div className="bulma-tags">

</div>

<p>Trigger a custom event.</p>

**Returns**: this
- <p>An instance of the component itself</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|event|string \| ComponentEvent|||<p>The name of the custom event to be triggered or an instance of the ComponentEvent</p>|
|params|Array&lt;any&gt; \| $ts:...|||<p>Event data to be sent when triggering a custom event </p>|

```ts
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
  hi: { foo: { a: number; b: boolean } };
  someEvent: (foo: number, bar: string) => void;
  someOtherEvent: void; // When there's no event argument
}> {
  some(){
    if(this.trigger("beforeHi")){ // When event call to stop return false.
      this.trigger("hi");// fire hi event.
    }
  }
}

const some = new Some();
some.on("beforeHi", e => {
  if(condition){
    e.stop(); // When event call to stop, `hi` event not call.
  }
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true

  typeof e.foo; // number
  typeof e.bar; // string
});
some.on("hi", e => {
  typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
```

### once {#once}

<div className="bulma-tags">

</div>

<p>Executed event just one time.</p>

**Returns**: this
- <p>An instance of the component itself</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|

```ts
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: ComponentEvent;
}> {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens
```

### hasOn {#hasOn}

<div className="bulma-tags">

</div>

<p>Checks whether an event has been attached to a component.</p>

**Returns**: boolean
- <p>Indicates whether the event is attached. </p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|eventName|string|||<p>The name of the event to be attached </p>|

```ts
import Component from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  some() {
    this.hasOn("hi");// check hi event.
  }
}
```

### on {#on}

<div className="bulma-tags">

</div>

<p>Attaches an event to a component.</p>

**Returns**: this
- <p>An instance of a component itself</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|

```ts
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}
```

### off {#off}

<div className="bulma-tags">

</div>

<p>Detaches an event from the component.<br/>If the <code>eventName</code> is not given this will detach all event handlers attached.<br/>If the <code>handlerToDetach</code> is not given, this will detach all event handlers for <code>eventName</code>.</p>

**Returns**: this
- <p>An instance of a component itself </p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|eventName|string \| $ts:...|✔️||<p>The name of the event to be detached </p>|
|handlerToDetach|function \| $ts:...|✔️||<p>The handler function of the event to be detached </p>|

```ts
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}
```

