In lesson 4, we saw an example of an eventListener added to a component. Here in Lesson 5, we describe eventListeners in more detail.
addEventListener adds the event to some element in the DOM that you specify, such as a button or an image. The event name is one of a long list known to the DOM system: “click”, “mouseup”, “mousedown”, and so on. In this case, “function” is the name of the function that is called when that event occurs. This is explained in more detail in the W3 documentation
For Argon-aframe in particular, there are two ways that you can attach eventListeners to your objects: either directly to a single object or through a component (which can be used for multiple objects).
Let’s look again at the code for the sphere from Lesson 4.
cursor-listener is the component that contains the three events. The advantage of defining a component is that we can attach the same component to many objects. Each object will then respond when clicked or when the cursor passes over it. But we could also attach the event directly to the sphere itself.
First, we would remove the component and instead give the sphere an id:
You could do this individually for each object and each event that you want to attach. This is sometimes useful, but, as noted, it is often better to create a component (see Lesson 12).