Aframe: Ability to listen to events emitted by components

[jonikorpi]

Description:

(In reference to this discussion on Slack.)

I have a cursor in an aframe-react app. I'd like to know when it gains or loses the cursor-hovering state and have my app react to it.

If I understood the reply on Slack correctly, there is no way to listen to these events?

• A-Frame Version: 0.3.0
• Platform/Device: all

[donmccurdy]

I don't think I understand the Slack discussion, but components emit events on their element, so this works for any component:

el.addEventListener('mouseleave', function () {
  // do stuff.
});

OTOH cursor-hovering is a state, not an event, but the mouseenter and mouseleave events should tell you when it could have changed. You can check an element for a state with:

el.is('cursor-hovering') ? 'yep' : 'nope'

@cvan was your comment in Slack saying that maybe state changes should fire independent events, e.g. statechange?

[ngokevin]

I think there's a stateadded / stateremoved event on the entity

[jonikorpi]

My original question in Slack was probably poorly phrased. :) Was supposed to be more about aframe-react anyway. stateadded and stateremoved were exactly what I was looking for and looks like aframe-react Entities have them as props.

Gonna close this issue. Thanks for the help!

[gbrian]

In my case got strange behavior using jQuery

mouseenter mouseleave have to be added using addEventLister ...weird!
but stateaddedand stateremoved are working fine.

I tested v2 and v3 of (google hosted) jQuery

$(document).ready(function(){
            // click working fine OK
            $('.clickable').click(function (ev) {
                console.log(this.id + ' was clicked!');
            })
            // addEventListener OK
            .each(function(i, el){
                el.addEventListener('mouseleave', function(ev){
                    console.log("dom ev leave " + this.id);
                });
                el.addEventListener('mouseenter', function(ev){
                    console.log("dom ev enter " + this.id);
                });
            })
            // jquery mousenter - mouseleave not working KO
            .on('mouseleave', function(ev){
                console.log("jquery leave " + this.id);
            })
            .on('mouseenter', function(ev){
                console.log("jquery enter " + this.id);
            })
            .mouseleave(function(ev){
                console.log("jquery leave " + this.id);
            })
            .mouseenter(function(ev){
                console.log("jquery enter " + this.id);
            })
            // jquery staeadded - stateremoved working fine! OK
            .on('stateadded', function(){
                console.log("jquery stateadded " + this.id);
            })
            .on('stateremoved', function(){
                console.log("jquery stateremoved " + this.id);
            });
        });