We were explaining how to override and catch determined events and methods in the component life cycle, but what if we want to write our own methods and execute them when the user clicks on some button or moves the mouse for one section? We will start to delegate events.

The event delegation concept is a useful concept where the event handler is attached to one single element instead of multiple elements on the DOM. What implies that? Memory efficiency. It drastically reduces the number of event subscriptions by leveraging the bubbling characteristic of most DOM events.

On the other hand, we have the trigger concept. Similar, but not equal. You should use trigger binding when you need to subscribe to events that do not bubble (blur, focus, load, and unload).

Some examples are as listed:

• You need to disable a button, input, or another element
• The element's content is made up of other elements (reusable component)

In code words, it can be explained like this:

<select change.delegate="myEventCallback($event)" ></select>

In your view model, you should have the method implemented with the correct number of params, so each time the <select> element changes, the event will be delegated to your custom function to handle it:

export class TriggerAndDelegateExample {

  myEventCallback(event){
    console.log(event)
  }

}

Now, let's trigger the same method:

<div class="option-container" focus.trigger="myEventCallback($event)"></div>

Note that we are using trigger binding to catch a not bubbling event.

In your daily work, maybe delegate and trigger could be enough for managing events, but there are some situations where you will need to know a little more advanced features to deal with it. Imagine that you are integrating a third-party plugin and need to interact with this content. Normally, trigger or delegate should do the work, but this won't be the case.

Let's look at an example:

<div class='my-plugin-container' click.delegate='onClickPluginContainer()'>
      <plugin-element></plugin-element>
</div>

But why? Remember that you are dealing with a third-party plugin, so this will manage its events independently of the container component. That being said, the inner plugin will call event.stopPropagation() on any click events.

So what can we do in that case? Don't worry, you have another option—the capture command:

<div class='my-plugin-container' click.capture='onClickPluginContainer()'>
  <plugin-element></plugin-element>
</div>

Now, the method will be executed correctly. Again, the most important question, why? It's because with the capture command, the onClickPluginContainer() event is guaranteed to happen irrespective of whether event.stopPropagation() is called or not inside the container.

Now, at this point, maybe you are wondering "So...what command should I use? Which of these is better?" The answer is simple—it depends on what you need. We recommend that you use delegate, because you will improve your application performance. Then, use trigger only if the event requires this, and finally, use capture if you will deal with third-party plugins or elements that you can't control, but remember that this last one is not commonly used and is not how you should normally work with browser events.