Is there any way to dynamically pause all eventListeners of an element?

Question

I'm making the step-by-step-filled form-like page now (hope it was grammatically correct ☺ ).

The main idea here is quite simple: while step one isn't done, step two is unavailable.
I need it to be truly unavailable, not just CSS-hidden (like opacity: 0; or visibility: hidden;).

So, here is the question: in JavaScript is there any way to dynamically pause (and unpause later) all eventListeners of some element?

P.S.: Event is for example onwheel || onmousewheel.

---

Here is the image (sorry for cyrillic):
(It's about scoresheet-typing.)

You see the <input type="range"> element here. Mouse scrolling on it will change it's value.

The first step of a form isn't done yet; so the second one have to be unavailable, and mouse scrolling on input range element should not work.
But this time I managed to it with opacity: .3;.
So all works fine, but the picture is kinda translucent, that's all.
It is bad.
It shouldn't react on mouse wheel at all (just usual page-scrolling).
And opacity must be full (opacity: 1;).
So, we return to the initial question.

Answer 1

There is no way in JavaScript to even list all event listeners for an element, so to stop them is an even taller order.

In short, the answer to your question is: there's no general way to pause all event listeners.

However, there are some things you may try that could help achieve your intent.

Plan A - HTML / CSS + a little JS: If your intent is simply to prevent the events from reaching the unactivated step, you may try a hack: create a transparent "blocker" element of the exact same dimensions. When you "disable" your step, "enable" your blocker to be right on top of it - probably using absolute positioning, e.g.

// Disable step 2
step2.style.opacity = '0.3'; // could also be a CSS class toggle, or an JS animation
step2_blocker.style.display = 'block'; // make your blocker show up on top of step2

You may use HTML+CSS to create the blocker, provided you know the position/dimensions. If not, you can use JS to create the blocker at run-time after computing step2's position/dimensions.

Plan B - JS only: If for some reason, you can't change HTML or CSS and you need a JS-only solution that doesn't alter the DOM, or if you are truly trying to solve the generic problem of "How can I pause event listeners?", then you probably only have one solution - keep track of your listeners. Essentially, you will be building your own event-binding/tracking library. The API consists of on(), off(), pause(), resume().

• on(HTMLElement, eventType, callback): you should push the listener callback into a registry - an array of listener objects, where listener objects contain HTMLElement and its corresponding eventType and event listener callback.
• off(HTMLElement, eventType, callback): remove listener object from registry.
• pause(HTMLElement, eventType, callback): find listener object from registry and set it to paused state, i.e. stop the actual listener.
• resume(HTMLElement, eventType, callback): find listener object from registry and rebind the element to the event listener.

Of course, the API can be made to be flexible/smart enough to accept different number of parameters (simulate function overloading), so that pause(elem) can pause all events on the element, and pause(elem, 'click') can pause all click events on that element.

Then, rather than use addEventListener() in your code, always remember to use on() in the library you created. You may have to refactor all your event binding and listener code.

This plan is slightly elaborate, but is probably the only way to keep track of event listeners. I have done this before, so I know this really works.

P/S: You may try to take a look at the source of some popular libraries out there to see how they keep track of events. I don't think any of them has any kind of support for pause() and resume() (yet), so it'd only be for some code inspiration.

Answer 2

In the context of a problem, I may just addEventListener after correct passing the step one, of course.
It is not the answer though.

Answer 3

You can set the disabled attribute of the inputs to true initially. Then as each input is filled in and/or validated, you can set the disabled attribute of the next one to false, to make it available.

Edit: given the update to the question, this answer doesn't seem to work. Setting disabled on an <input type="range"> does not seem to prevent wheel events from firing, at least in chrome.