The event-set Component

The event-set component simplifies event-based interactions. Previously, we saw that we created components that listened to events such as a click or intersection events. Then, we attached these components to entities to detect interaction events. This process can be made easier by using the event-set component provided by the following JavaScript file:

Using event-set to invoke events

In this example, we’ll see a basic implementation of the event-set component that will demonstrate its simplicity in performing event-driven interactions. For the following example, we get control of the cursor (by holding the left click) and then drag the mouse to move the cursor away from the sphere to trigger a color change. Similarly, if we hover back onto the sphere, we’ll see a color change.

On lines 26–27, we attach two instances of the event-set component to the sphere. We can add any arbitrary event name after the two underscores (__). The _event property is used to define the particular event we want to listen for. We set this to mouseenter and mouseleave and change the color of the sphere when these events occur.

Manipulating target entities

We can also use the event-set component to manipulate target entities. In this example, we use the sphere as a remote control of the carMiklas, K. (n.d.). (FREE) Porsche 911 Carrera 4S. Sketchfab. Retrieved from https://skfb.ly/6WGTU (a 3D model) that displays a spotlight above it. Drag the cursor onto the sphere and click to cast a spotlight onto the vehicle. To turn off the spotlight, drag the cursor onto the vehicle and click.

On line 39, we attach the event-set__show component to the sphere. We look for the entity to manipulate using the target query selector. Additional key-value pairs, apart from _event and _target, will be applied upon the event emission. So, when we set visible: true key-value pair when the click event occurs on the sphere, it is the visible property of the target that is set to true.

Similarly, on line 28, we attach the event-set__close component to the car; therefore, dragging the cursor onto the car and then clicking it triggers the event handler that sets the light as invisible.

We can also add a delay before setting the property on the target entity using the _delay variable. For example, a delay of 1000ms applied on the event-set__show component will cause the light to become visible, but only after the passage of one second after clicking on the sphere.

Conclusion

With this, our lesson on the event-set component comes to an end. We saw how the use of this component can simplify event-driven interactions in A-Frame.