How to check if the event listener is added already to window using javascript?

Question

i wanted to check if the event listener is already attached to the window using javascript or react.

what i am trying to do?

i have a dropdown menu component and in its didupdate hook cycle if the dropdown menu is open i add scroll event listener and on unmount hook cycle i remove the scroll event listener.

but in didupdate hook i add scroll event only if the condition this.props.open && !prevState.open is true....

but i dont remove the eventlistener scroll if this condition is false.

how can i do it....

below is the code,

componentDidUpdate(prevProps, prevState) {
    if (this.props.open && !prevState.open) {
        window.addEventListener('scroll', this.handle_scroll, {capture: true, passive: true});
    } else {
        //i want to remove scroll eventlistener here if its already added
    }
}

componentWillUnmount () {
    window.removeEventListener('scroll', this.handle_scroll, {capture: true, passive: true});
}

handle_scroll = () => {
    requestAnimationFrame(this.call_some_method);
};

What i have tried

componentDidUpdate(prevProps, prevState) {
    if (this.props.open && !prevState.open) {
        window.addEventListener('scroll', this.handle_scroll, {capture: true, passive: true});
    } else {
        window.removeEventListener('scroll', this.handle_scroll, {capture: true, passive: true});
    }
}

But as seen from above code....it adds the scroll event listener only when the props.open && !prevState.open is true... and i remove the eventlistener when this is condition is false...and i want it to remove eventlistener when this.props.open && !prevState.open is false && scrollevent listener is added to window.

How can i do it. could someone help me with this. thanks.

Just set `state.listenerAdded` to `true` to keep track of it. — , Dec 05 '19 at 11:32
thanks but i dont want to use another state for this. could it be done without state. — someuser2491, Dec 05 '19 at 11:44
Wait a sec, you're comparing props.open and state.open, are you sure that's right? Assuming this is a typo, you could simply reverse the condition: `else if (!this.props.open && prevState.open)`, which is the transition from "open" to "not open". (still: why not simply use state? it's a perfect fit here, since you want to keep track of... well... state) — , Dec 05 '19 at 11:50
...copied the typo. Supposed to say `else if (!this.props.open && prevProps.open)` — , Dec 05 '19 at 12:11

score -1 · Answer 1 · answered Dec 05 '19 at 11:50

You can do this with jQuery (see here) so it shouldn't be much trouble to transfer over to native JS.

You can get this information from the data cache. For example, log them to the console (firebug, ie8):

console.dir( $('#someElementId').data('events') );

or iterate them:

jQuery.each($('#someElementId').data('events'), function(i, event){

    jQuery.each(event, function(i, handler){

        console.log( handler.toString() );

    });

});

Another way is you can use the following bookmarklet but obviously this does not help at runtime.

How to check if the event listener is added already to window using javascript?

1 Answers1